AngularJS digest loop walkthrough two way data binding
Example
Angular has some magic under its hood. it enables binding DOM to real js variables.
Angular uses a loop, named the "digest loop", which is called after any change of a variable - calling callbacks which update the DOM.
For example, the ng-model directive attaches a keyup eventListener to this input:
<input ng-model="variable" />
Every time the keyup event fires, the digest loop starts.
At some point, the digest loop iterates over a callback which updates the contents of this span:
<span>{{variable}}</span>
The basic life-cycle of this example, summarizes (very Schematically) how angular works::
- Angular scans html
ng-modeldirective creates akeyuplistener on inputexpressioninside span adds a callback to digest cycle
- User interacts with input
keyuplistener starts digest cycle- digest cycle calles the callback
- Callback updates span's contents
