ionic progressbar

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
    <title></title>
    <link rel="stylesheet" href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" />
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <script src="app.js"></script>
    <script src="controllers.js"></script>
  </head>

  <body ng-app="starter">
      <ion-nav-bar class="bar-positive">
        <ion-nav-back-button>
        </ion-nav-back-button>
      </ion-nav-bar>
      <ion-nav-view></ion-nav-view>
  </body>

</html>

angular.module('starter', ['ionic', 'starter.controllers'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    .state('home', {
        url: '/home',
        templateUrl: 'home.html',
        controller: 'HomeController'
    })

    .state('second', {
        url: '/second',
        templateUrl: 'secondview.html',
        controller: 'SecondController'
    });
    
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/home');
});

angular.module('starter.controllers', [])

.controller('HomeController', function($scope, $state, $interval) {
  
  $scope.progressval = 0;
  $scope.stopinterval = null;
  
  $scope.updateProgressbar = function()
  {
    startprogress();
    
  }
  
  function startprogress()
  {
    $scope.progressval = 0;
    
    if ($scope.stopinterval)
    {
      $interval.cancel($scope.stopinterval);
    }
    
    $scope.stopinterval = $interval(function() {
          $scope.progressval = $scope.progressval + 1;
           if( $scope.progressval >= 100 ) {
                 $interval.cancel($scope.stopinterval);
                 $state.go('second');
                 return;
            }
     }, 100);
  }

  startprogress();
  
})

.controller('SecondController', function($scope) {
  
});

<ion-view view-title="Home Page" cache-view="false">

  <ion-content has-header="true" padding="true">

    <div class="button-bar">
      <a class="button" ng-click="updateProgressbar()">progress</a>
    </div>
        
    <progress id="progressbar" max="100" value="{{ progressval }}"> </progress>
    <div id="progressbarlabel">{{ progressval }} %</div>

  </ion-content>
  
</ion-view>

<ion-view view-title="Second Page">

  <ion-content has-header="true" padding="true">
  Hi!
  </ion-content>
  
</ion-view>