Refreshing the battery status with AngularJS/Ionic - angularjs

Question

My Ionic app displays the battery level in a HTML element <progress></progress>.
My problem is that the status of the battery will not be updated, if I change the pages or open a new page. In the case is the status always zero.
When I launch the app on the start page of the app looks the status like this (Now is fully charged):
when I change the pages so (the current status is not called):
My question is, how can I update/refresh the status of the battery on every pages?
The other question is, how can I add the current percentage of the battery status in the <progress> Element? like:
HTML:
<progress ng-controller="batteryController" max="100" value="{{batteryLevel}}">
</progress>
JavaScript:
myApp.controller("batteryController", function ($scope, $rootScope, $ionicPlatform, $cordovaBatteryStatus) {
$ionicPlatform.ready(function () {
$rootScope.$on("$cordovaBatteryStatus:status", function (event, args) {
console.log(args);
$scope.batteryLevel = args.level;
console.log($scope.batteryLevel);
$scope.isPluggedIn = args.isPlugged;
console.log($scope.isPluggedIn);
});
$rootScope.$on('$cordovaBatteryStatus:critical', function (event, args) {
$scope.batteryLevel = args.level; // (0 - 100)
$scope.isPluggedIn = args.isPlugged; // bool
});
$rootScope.$on('$cordovaBatteryStatus:low', function (event, args) {
$scope.batteryLevel = args.level; // (0 - 100)
$scope.isPluggedIn = args.isPlugged; // bool
});
});
});
CSS:
/* All HTML5 progress enabled browsers */
progress {
/* Turns off styling - not usually needed, but good to know. */
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
/* gets rid of default border in Firefox and Opera. */
border: solid #cccccc 5px;
border-radius: 10px;
/* Dimensions */
width: 100px;
height: 40px;
}
/* Polyfill */
progress[role]:after {
background-image: none; /* removes default background from polyfill */
}
/*
* Background of the progress bar background
*/
/* Firefox and Polyfill */
progress {
background: #cccccc !important; /* !important only needed in polyfill */
}
/* Chrome */
progress::-webkit-progress-bar {
background: #cccccc;
}
/*
* Background of the progress bar value
*/
/* Firefox */
progress::-moz-progress-bar {
border-radius: 5px;
background-image: -moz-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
}
/* Chrome */
progress::-webkit-progress-value {
border-radius: 5px;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -webkit-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
}
/* Polyfill */
progress[aria-valuenow]:before {
border-radius: 5px;
background-image: -moz-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -ms-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
background-image: -o-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
}

Answer 1

I have made a simple solution for this.First add a plugin battery-status
cordova plugin add cordova-plugin-battery-status
Javascript
myApp.controller('batteryController', function($scope,$ionicPlatform) {
$ionicPlatform.ready(function() {
window.addEventListener("batterystatus", onBatteryStatus, false);
function onBatteryStatus(info) {
info.level;
percentageChanged(info.level);
}
});
function percentageChanged(value) {
$scope.batteryLevel = value;
};
});
This batterystatus event fires when the percentage of battery charge changes by at least 1 percent, or if the device is plugged in or unplugged.So we can update the value of batteryLevel by angular two way binding syntax.
Html
<ion-view view-title="Menu">
<ion-content class="padding">
<div style="position: absolute;text-align: center;width: 100%;padding: 13px;">{{batteryLevel}}%
</div>
<progress max="100" value="{{batteryLevel}}">100
</progress>
</ion-content>
</ion-view>
The percentage can shown in your progress bar by adding an extra div tag.