progress bar value not starting at zero

Question

I have a progress bar and instead of the value starting at zero, it starts at some other value, moves back to zero and then goes forward.

Code for Progressbar

    <div class="modal-header">  
    </div>
    <div class="modal-body">
    <div>
        <progressbar class="progress-striped active" max="100" type='success' value="progress"></progressbar>
   </div>

in the open function of modal -

     function open(){
     $scope.progress = 0;
     var modalInstance = $modal.open({
        animation: true,
        templateUrl: 'views/progressBar.html',
        controller: 'progressController',
        scope: $scope
    });
};

controller.js

    angular.module('app').controller('progressController', function($scope, $modalInstance) {
        $scope.$watch('length', function() {
           if ($scope.length==0 && $scope.progress!=0) {
                        $modalInstance.close();
                }
      });
 });

Answer 1

You're setting $scope.progress = 0 inside the open function, try setting it to 0 when the controller is loaded too.

angular.module('app').controller('progressController', function($scope, $modalInstance) {
  $scope.progress = 0;
  $scope.$watch('length', function() {
    if ($scope.length==0 && $scope.progress!=0) {
      $modalInstance.close();
    }
  });
});