AngularJS digest loop walkthrough $digest and $watch


Implementing two-way-data-binding, to achieve the result from the previous example, could be done with two core functions:

  • $digest is called after a user interaction (binding DOM=>variable)
  • $watch sets a callback to be called after variable changes (binding variable=>DOM)

note: this is example is a demonstration, not the actual angular code

<input id="input"/>
<span id="span"></span>

The two functions we need:

var $watches = [];
function $digest(){
        var val = $w.val();
        if($w.prevVal !== val){
            $w.callback(val, $w.prevVal);
            $w.prevVal = val;
function $watch(val, callback){
    $watches.push({val:val, callback:callback, prevVal: val() })

Now we could now use these functions to hook up a variable to the DOM (angular comes with built-in directives which will do this for you):

var realVar;    
//this is usually done by ng-model directive
}, true);

//this is usually done with {{expressions}} or ng-bind directive
$watch(function(){return realVar},function(val){
    span1.innerHTML = val;

Off-course, the real implementations are more complex, and support parameters such as which element to bind to, and what variable to use

A running example could be found here: