What is the digest cycle in AngularJs?

AngularJs watch: It is provided by AngularJs Framework to keep track of scope variables and the change in their values. Watches are automatically created by AngularJs Framework. It is usually done for data bindings and for which variables are decided by AngularJs Framework. Custom functions that are created for watches are called watch listeners.
Watch counts: If watch count is below 2000, performance is better. We may use Angular watchers extension to count them. Angular performs watching on data-binded variables but if we want we can perform watch on normal variables as well, using watch function. It takes parameter the variable that we explicitly want to watch.
Watch list: Maintains a list of all the watches associated with an angular application. i.e all the data bindings being monitored. A watch list is maintained for all scopes including root.

Digest cycle

dirty checking

Watch listeners are automatically executed whenever the digest process finds any modifications in the variables. It keeps note of changes and then notifies AngularJs Framework to update DOM. Thus at the end of every digest process, DOM is updated.
Angular Context is a runtime environment of AngularJs Framework.
First digest process performs a dirty check on watches, and checks if there are any modifications It again performs the second cycle of dirty checking on the previous cycle, watches listeners. Because there may have been variables that have got changed by others. Minimum 2 iterations are performed and the maximum 10 can run. Although it is preferred to minimize the digest cycle for better performance. Error is thrown after maximum.

First level and second level updating

First level updates: Suppose the variable b was updated by any event, then during the first cycle Digest cycle informs the AngularJs Framework about the changes and goes through the second cycle after that. Since there are no more updates, it thus updates DOM and completes it.

Second level watch updates: Whenever there is a change encountered in the first cycle for any particular watch say c, digest process executes watch listener for it. Now watch listener further modifies variable a to a new value. After the first cycle, c gets updated. During the second cycle, we encounter changes in a and thus update takes place for a. Now a third cycle takes place and there are no more modifications encountered. DOM gets updated. An example for second level updates:

html

$scope.a = 1;
$scope.b = 2;
$scope.c = 3;

$scope.$watch('a', function( newValue, oldValue ) {
       if( newValue != oldValue ) {
           console.log("a is modified to " +newValue );
}
});

$scope.$watch('b', function( newValue, oldValue ) {
       if( newValue != oldValue ) {
           console.log("b is modified to " +newValue );
}
});

$scope.$watch('c', function( newValue, oldValue ) {
       if( newValue != oldValue ) {
           console.log("c is modified to " +newValue );
                if( $scope.c > 50 ) {
                     $scope.a = 1000;  
                 }
}
});

$rootscope.$watch( function() {
       console.log(" digest iteration started ");
});

Considering scope variables a, b, c are data binded and are eligible for the digest process. If we inspect the angular application in the browser and open the console. We can track the changes as the print statements will help us. Suppose there was a two way binding for c with an input box we could easily track the number of times it gets modified. In fact, we can inspect the digest process too, by applying $watch function on $rootscope. $watch: This function takes three parameters- watch expression, listener and object equality. Except for expression the other two are optional.

The digest process starts with the root scope and later on identifies the other scopes. If our code uses DOM events (ng-click), ajax with callback, timer with callback, Browser location changes, manual invocations like $apply then it is bound to have Digest process for all of them.

As we know, the browser is responsible to render the DOM and it may have events like Timer, On-click. The browser maintains a queue for these events called Event Queue. And it sends those to Javascript. Consequently, a digest takes place for them. If events are not related to Javascript i.e written in Jquery or other languages, then it is our duty to write $apply function for maintaining digest for them.

$scope.$apply(function() {    
});

Complete scenario of Digest cycle:

What is the digest cycle in AngularJs?

Explore