AngularJS update scope value on page on every loop

Question

What do I need to do to update the scope variable in the UI on every iteration of the loop in this example?

JS

var q = 100;
while ( q > 0 ) {
  $scope.someThing = q;
  q--;
}

HTML

{{someThing}}

I thought I was on to something with the following but it isn't working. All I see is the final result, not each iteration.

var q = 1000;
while ( q > 0 ) {
    $scope.$apply(function () {
      $scope.someThing = q;
      q--;
    });
}

--Edit--

Thanks for the suggestions on interval/timeout. I think I understand why this is needed now. But I was hoping I could "callback" the redraw somehow so the loop still runs as fast as possible. Is there a simple way to achieve that?

You would need to perform it in a $timeout basically you would need to make it async. loop runs synchronously. SO your loop completes running digest cycle happens and view gets updated with the result. — PSL
– PSL, Commented Jan 2, 2015 at 16:51
That loop executes extremely fast - you won't see it count up. — tymeJV
– tymeJV, Commented Jan 2, 2015 at 16:51

PSL · Accepted Answer · 2015-01-02 17:03:35Z

3

~~That loop executes extremely fast - you won't see it count up.~~ Thanks to @PSL for a better explanation: Basically JavaScript loop runs synchronously. And Angular depends upon the digest cycle to update the view based on the scope property. In this case loop runs and then digest cycle happens. You would instead need to let the digest cycle happen after every count in order to see progressive update.

Use a $timeout if you want it to work:

var q = 100;

function subtractQ() {
    q--;
    $scope.someThing = q;
}

$timeout(subtractQ, 1000);

Or $interval

$interval(function() {
    q--;
    $scope.someThing = q;
}, 1000);

edited Jan 2, 2015 at 17:03

PSL

124k21 gold badges257 silver badges243 bronze badges

answered Jan 2, 2015 at 16:52

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

PSL Over a year ago

It really not just about it running extremely fast. Basically javascipt loop is synchronous. And angular depends upon the digest cycle to update the view based on the scope property. In this case loop runs and then digest cycle happens.

xdfil Over a year ago

So is there has to be some sort of delay in order for it to be redrawn on the UI? That seems like it would slow things down unnecessarily. Can't I "callback" the redraw somehow so it runs as fast as possible?

tymeJV Over a year ago

@PSL -- Much better explanation - added it to my answer.

tymeJV Over a year ago

@xdaxdb -- What is your overall goal - I thought it was to have a countdown the user could see, is there a different purpose?

xdfil Over a year ago

In my actual application I am trying to write, there is a mathematical/statistical experiment running in a loop. I want to display the results as they happen. I want it to run as fast as possible while also making the results change rapidly on the page.

|

Marcel Gwerder · Accepted Answer · 2015-01-02 17:01:34Z

1

It's because you need to do it async with a timeout between each iteration. I'd use $interval for this:

var testApp = angular.module('testApp', []);

testApp.controller('testCtrl', ['$scope', '$interval', function($scope, $interval) {

  var q = 100;
  var interval = $interval(decreaseQ, 50);
  
  function decreaseQ() {
    $scope.someThing = q;
    
    if(q == 0) $interval.cancel(interval);
    else q--;
  }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="testApp" ng-controller="testCtrl">
  {{someThing}}
</div>

answered Jan 2, 2015 at 17:01

Marcel Gwerder

8,5406 gold badges40 silver badges63 bronze badges

1 Comment

xdfil Over a year ago

Great answer, it's hard to choose which answer to mark correct when there are multiple answers that are similar.

Karthik · Accepted Answer · 2015-01-02 16:52:54Z

1

You could try $timeout instead of the while loop to delay the function.

Something like this:

 $timeout(function(){
    $scope.something = q;
    q--;
  }, 1000);

answered Jan 2, 2015 at 16:52

Karthik

1,3776 silver badges8 bronze badges

Collectives™ on Stack Overflow

AngularJS update scope value on page on every loop

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related