How to Increase a progress bar in Angularjs loop -

i'm learning angularjs , having problems increasing progress bar during loop.

i'll explain better. have modal checkbox of months, ones shown on website below

http://vitalets.github.io/checklist-model/

so, can choose 1 or more months obtain data.

the html code is

 <fieldset>     <input type="checkbox" ng-model="calendar" ng-change="keepmonths()">all     <div ng-repeat="month in months">         <div class="row">             <input type="checkbox" checklist-model="choose.selected" checklist-value="month"> {{month.name}}         </div>     </div>     <button name="export" ng-click="exportexcel()" class="upbutton">export</button>     <div class="demo-section k-content" style="width: 350px;">         <h4>{{status}}</h4>         <div kendo-progress-bar="progressbar" k-min="0" k-max="100" ng-model="progress"></div>     </div> </fieldset> 

if click in export button realy works fine, want put progress bar, because processing of months takes lot of time , wish user follow processing of data, try this:

   $scope.exportexcel = function () {      $scope.status = "processing...";  // doesn't work     $scope.$apply($scope.status);  // doesn't work      var data = []     var increase = $scope.choose.selected.length / 100      (var = 0; < $scope.choose.selected.length; i++) {         startdate = new date("01/01/2015 00:00:00"; //for example         enddate = new date("31/01/2015 23:59:59"; //for example              mustservice.getexcel($rootscope.empreendimento, $rootscope.pontoconexao, postohorario, datainicio, // getexcel goes code behind , returns json (dados) data of month             function (dados) {                 data = $scope.concatdados(dados, data);  // concatdados responsible concatenate data months in 1 variable (data)             }, null, datafim);            $scope.progress = $scope.progress + increase; // doesn't work         $scope.$apply($scope.progress); // doesn't work         $scope.progress = 20; // doesn't work (for test)         $scope.$apply($scope.progress); //  doesn't work (for test)     }      // code below responsible downloading excel     var query = 'select nomreduzido [empreendimento], nomcurto [ponto de conexão], dinquinzeminutos [data/hora], ifnull(codorigem, \'\') origem, ';     query = query + ' xlsx("must_' + $rootscope.empreendimento.trim() + '_' + decodeuri($rootscope.pontoconexao).trim() + '_' + $rootscope.postohorario.trim() + faltante + '.xlsx" , ? ) ?';     alasql(query, [opts, data]);      $scope.progress = 20; // works     $scope.$apply($scope.progress); // works     $scope.status = "concluded..."; // works     $scope.$apply($scope.status);   // works } 

if try increase progress bar, doesn't work. progress bar begin increase after end of loop, , don't know why. put comments in code understand.

i tried put inside of loop, test, doesn't work. however, if put same code below outside loop works, takes times loop part, because of it's importante increase there.

   $scope.progress = 20;    $scope.$apply($scope.progress); 

i tried put image message "loading", image still appearing when loop ends.

if me show way increase progress bar during loop or show image, grateful

$scope.progress being set correctly @ correct times in code. long script executing synchronously, though, never see repaint shows updates on progress bar itself. in desktop applications, issue handled having ui thread , worker thread. ui thread idle, happily repaints when it's informed progress has incremented. leaving aside web workers now, javascript single-threaded, while you're inside for loop, never goes idle , allows repaint.

if progress bar essential, far-from-trivial answer make for loop asynchronous, using $timeout. setting timeout delay 0 should work.

more information, , idea of how proceed, can found in 2nd answer this stack overflow question , accepted answer on this one.