Scope not updating view in ionic-angularJs (using $interval)

I have this sneaky problem in ionic+angularjs. I have some code in the controller that looks like this..

$scope.progressval = 0;
var stop = $interval(function() {
      $scope.progressval = $scope.progressval + 1;
       if( $scope.progressval >= 100 ) {
             $interval.cancel(stop);
             $state.go(‘app.b’);
        }
 }, 100);

My html page looks like this:

<progress id="progressbar" max="100" value="{{ progressval }}"> </progress>
<div id="progressbarlabel">{{ progressval }} %</div>

Yes, i am trying to update the progress bar on my page.. Issue is, when i load the app (in browser) for the first time, i dont see the steady progress of the progress bar (it does work, in the sense that it does goto state b). However, when i try it again (without reloading) it seems to work. I tried adding $scope.$apply() but doesn't help either. Any feedback would be appreciated..

try by adding a $timeout (which call $apply)

$scope.progressval = 0;
var stop = $interval(function() {
      $timeout(function(){
         $scope.progressval = $scope.progressval + 1;
      });
       if( $scope.progressval >= 100 ) {
             $interval.cancel(stop);
             $state.go(‘app.b’);
        }
 }, 100);