title: How does angular binding happen?
body: <p>Below is my understanding of how binding happens in angularJS. Would be great if experts can provide feedback/comment..</p>
  
  <pre><code>&lt;div ng-controller="ctrlA"&gt;
    {{myvar}}
    {{anothervar}}
  &lt;/div&gt;
  
  $scope.watch( function (scope) {
      return scope.anothervar;
    } ,  function (oldValue, newValue) {
      // code to manupilate HTML with new value!!
    });
  
  $scope.watch( function (scope) {
      return scope.myVar;
    } ,  function (oldValue, newValue) {
      // code to manipulate HTML with new value!!
    });
  </code></pre>
  
  <p>As soon as angularJS encounters {{myVar}} (and {{anothervar}}) a watcher (for each variable) is created internally. This watcher is created for $scope of controller 'ctrlA'.</p>
  
  <p>Whenever functions are called within $timeout, ng-click etc they are embedded within $scope.apply(). After your function is executed (which might change some scope variables), $apply will call digest on the rootScope. This will sync variables throughout the app with the UI!</p>
  
  <p>When $scope.digest is called it iterates through all the watchers for that scope. It then gets the current value of the variable and checks to see if it changed. If it changed it calls the watcher handler (which changes the html to reflect the new value!). </p>
  
  <p>I have a <strong>question</strong> here. Does angularJS store have some kind of key-map (or some data structure) for every scope, which contains the reference to watcher and the current value for that watcher?? Something like:</p>
  
  <pre><code>watch ref (for myvar) -&gt; current value (of myvar)
  watch ref (for anothervar) -&gt; current value (of anothervar)
  </code></pre>