title: Refreshing the battery status with AngularJS/Ionic
body: <p>My Ionic app displays the battery level in a HTML element <code>&lt;progress&gt;&lt;/progress&gt;</code>.</p>
  
  <p>My problem is that <strong>the status of the battery will not be updated</strong>, if I change the pages or open a new page. In the case is the status always zero.</p>
  
  <p>When I launch the app on the start page of the app looks the status like this (Now is fully charged):</p>
  
  <p><a href="https://i.stack.imgur.com/1Zoyo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Zoyo.png" alt="enter image description here"></a></p>
  
  <p>when I change the pages so (the current status is not called):</p>
  
  <p><a href="https://i.stack.imgur.com/Owk6N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Owk6N.png" alt="enter image description here"></a></p>
  
  <p>My question is, <strong>how can I update/refresh the status of the battery on every pages?</strong></p>
  
  <p>The other question is, <strong>how can I add the current percentage of the battery status in the <code>&lt;progress&gt;</code> Element</strong>? like:</p>
  
  <p><a href="https://i.stack.imgur.com/HcDvB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HcDvB.png" alt="enter image description here"></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;progress ng-controller="batteryController" max="100" value="{{batteryLevel}}"&gt;
  &lt;/progress&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>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
          });
      });
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* 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%
      );
  }
  </code></pre>