angularjs - when $digest cycle is called?

Question

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?

Answer 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.