AngularJS/Cordova battery status

I'm trying to display the battery status of my device. I have installed the following plug-in:

Cordova Cordova plugin add-plugin-battery status

I have wrote a controller in a separate file named batteryStatus.js:

myApp.controller("BatteryCtrl", function($scope, $rootScope, $ionicPlatform, $cordovaBatteryStatus) {

    $ionicPlatform.ready(function() {
        $rootScope.$on("$cordovaBatteryStatus:status", function(result) {
            var batteryLevel = result.level;       // (0 - 100)
            var isPluggedIn  = result.isPlugged;   // bool
        });
    });
});

The call of the function from HTML:

<script src="js/batteryStatus.js"></script>

<div ng-controller="BatteryCtrl">
   Status: {{batteryLevel}} %
   Pluged In: {{isPluggedIn}}
</div>

But the status is not shown. What is wrong with the code?

First you need to add the batteryStatus.js plugin in your projectfolder & link it in your index.html page.

<script src="js/batteryStatus.js"></script>

I suggest you rename your file batteryStatus.js to batteryCtrl.js since its conflicting now.

After that, you need to inject ngCordova in your app.js file:

var exampleApp = angular.module('starter', ['ionic', 'ngCordova'])

In your batteryController, you need to bind your variables to the $scope.

It should be:

$scope.batteryLevel = result.level;       // (0 - 100)
$scope.isPluggedIn  = result.isPlugged;   // bool

If the $scope isn't updated, you could try to $apply it again.

$scope.$apply(function() {
    $scope.batteryLevel = result.level; // (0 - 100)
    $scope.isPluggedIn = result.isPlugged; // bool
});

I uploaded a sample project in git hub for battery status in Ionic framework battery-status if you have any queries please let me know