when $digest cycle is called?

I'm very confused when a digest cycle is happening, is it called periodically based on a timer every 50ms (as it says here and implied here) or is it called after every event that enters the angular context (as it says here, here and here) ?

Example when it is matter:

In my model, I have a variable called myVar with the value of 3. In my HTML, I have {{myvar}}. An event such as a button click is fired and raises a handler in the controller, the code inside the handler is:

$scope.myVar = 4;
// some heavy actions takes place for 3 seconds...
$scope.myVar = 5;

Assuming the UI thread is not blocked, what will the user see after the button click? will he see only 5 or will he see 4 and after 3 seconds 5?

Solution 1:

I think the description of the digest cycle at http://blog.bguiz.com/post/60397801810/digest-cycles-in-single-page-apps that it is

code that runs at an interval

is very misleading, and to be honest, when referring to Angular, I would even say wrong. To quote Pawel Kozlowski, Mastering Web Application Development with AngularJS

AngularJS does not use any kind of polling mechanism to periodically check for model changes

To prove there is no polling, if you have a template of

<p>{{state}}</p>

and controller code of

$scope.state = 'Initial';
// Deliberately *not* using $timeout here
$window.setTimeout(function() {
  $scope.state = 'Changed';
},1000);

as in this plunker, then the string shown to the user will remain as Initial and never change to Changed.

If you're wondering why you often see calls to $apply, but not always, it is probably because the various directives that come with Angular, such as ngClick or ngChange will call $apply themselves, which will then trigger the cycle. Event listeners to native JS events directly will not do this, so they will have to deliberately call $apply to have any changes made reflected in templates.

Solution 2:

The digest process is kicked-in when any of the following occur as part of angular context:

• DOM Events (like ng-click etc.)
• Ajax with callbacks ($http etc.)
• Timers with callbacks ($timeout etc.)
• calling $apply, $digest
• etc.

It is important to note that the normal browser related DOM events (onclick etc.) and setTimeout would not trigger a digest process as they work out of "Angular Context".

I learnt the above from the following:

The above is a quick snapshot from a very in-depth tutorial available here: https://www.youtube.com/watch?v=SYuc1oSjhgY

Solution 3:

Any AngularJS scope variable when handled from outside (including ajax) needs a $apply().

setTimeout is Javascript function So $apply is needed to update angularjs values.

$timeout is a angularjs function which returns promise and takes care of the current scope and runs in the same digest cycle.

So need not of $apply() function to update values.