Обновление состояния батареи с помощью AngularJS/Ionic

Приложение My Ionic отображает уровень заряда батареи в HTML-элементе <progress></progress>.

Моя проблема в том, что статус батареи не будет обновляться, если я поменяю страницы или открою новую страницу. В случае если статус всегда нулевой.

Когда я запускаю приложение, на стартовой странице приложение выглядит так (сейчас полностью заряжено):

когда меняю страницы так (текущий статус не вызывается):

У меня вопрос: как я могу обновить/обновить состояние батареи на каждой странице?

Другой вопрос: как я могу добавить текущий процент заряда батареи в элемент <progress>? как:

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%
    );
}