title: AngularJS: how $digest loop propagation works with isolated scopes?
body: <p>I've written an AngularJS (1.x) directive that wraps a pure javascript library object, called <code>browser</code>. </p>
  
  <p>In order to update Angular scope variables and view in response to events, occurring within <code>browser</code>, I have to manually call <code>$apply</code>, invoking the digest loop:</p>
  
  <pre><code>scope.browser.on({
      afterSetRange: function(){
          if (!scope.$$phase) scope.$apply();
      }
  });
  </code></pre>
  
  <p>This works fine, when my directive is not creating its own <code>scope</code> - I say <code>scope: false</code> in Directive Definition Object (DDO). In that case <code>scope</code> refers to the page controller's <code>$scope</code>.</p>
  
  <p>But when I'm using an isolated scope with <code>scope: {myattr: '='}</code>, this apparently doesn't save me from getting:</p>
  
  <pre><code>Error: [$rootScope:inprog] $digest is already in progress
  </code></pre>
  
  <p>I solved this problem by replacing <code>if (!scope.$$phase) scope.$apply</code> with <code>$timout(angular.noop)</code>. (This means, that <code>scope.$apply</code> is poorly designed - it should just work, instead of forcing people to dig in its internals). What I really want is an asnwer to the following theoretical question, not practical help:</p>
  
  <hr>
  
  <p>I don't understand the theory behind <code>$digest</code> loop. <a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$new" rel="nofollow noreferrer">Documentation</a> of <code>rootScope.$new()</code> implies that <code>$digest</code> event propagates from rootScope to its children. So, do we have a single digest loop for the whole angular app? Or a loop per each scope?</p>
  
  <p>And how does Angular achieve synchronization between directive attributes and controller around it, when I'm using 2-way data binding in directive (e.g. <code>scope: {myattr: '='}</code>)?</p>