title: Debugging Angular's digest cycle: How to find the cause of an infinite loop?
body: <p>I currently am working on some code with lazy-loaded content + controllers. My code basically works like <a href="http://jsfiddle.net/8Bf8m/22/" rel="noreferrer">this fiddle</a>. However, for some reason, my version does not work, and instead I get <a href="https://docs.angularjs.org/error/$rootScope/infdig?p0=10&amp;p1=%5B%5B%22fn:%20function%20()%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20start%20%3D%20performance.now()%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20ret%20%3D%20w.apply(this,%20arguments)%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20end%20%3D%20performance.now()%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20debug.watchPerf%5BwatchStr%5D.time%20%2B%3D%20(end%20-%20start)%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20debug.watchPerf%5BwatchStr%5D.calls%20%2B%3D%201%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20ret%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%3B%20newVal:%208%3B%20oldVal:%207%22%5D,%5B%22fn:%20function%20()%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20start%20%3D%20performance.now()%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20ret%20%3D%20w.apply(this,%20arguments)%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20end%20%3D%20performance.now()%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20debug.watchPerf%5BwatchStr%5D.time%20%2B%3D%20(end%20-%20start)%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20debug.watchPerf%5BwatchStr%5D.calls%20%2B%3D%201%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20ret%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%3B%20newVal:%209%3B%20oldVal:%208%22%5D,%5B%22fn:%20function%20()%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20start%20%3D%20performance.now()%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20ret%20%3D%20w.apply(this,%20arguments)%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20end%20%3D%20performance.now()%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20debug.watchPerf%5BwatchStr%5D.time%20%2B%3D%20(end%20-%20start)%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20debug.watchPerf%5BwatchStr%5D.calls%20%2B%3D%201%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20ret%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%3B%20newVal:%2010%3B%20oldVal:%209%22%5D,%5B%22fn:%20function%20()%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20start%20%3D%20performance.now()%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20ret%20%3D%20w.apply(this,%20arguments)%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20end%20%3D%20performance.now()%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20debug.watchPerf%5BwatchStr%5D.time%20%2B%3D%20(end%20-%20start)%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20debug.watchPerf%5BwatchStr%5D.calls%20%2B%3D%201%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20ret%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%3B%20newVal:%2011%3B%20oldVal:%2010%22%5D,%5B%22fn:%20function%20()%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20start%20%3D%20performance.now()%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20ret%20%3D%20w.apply(this,%20arguments)%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20end%20%3D%20performance.now()%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20debug.watchPerf%5BwatchStr%5D.time%20%2B%3D%20(end%20-%20start)%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20debug.watchPerf%5BwatchStr%5D.calls%20%2B%3D%201%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20ret%3B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%3B%20newVal:%2012%3B%20oldVal:%2011%22%5D%5D" rel="noreferrer">an infinite digest cycle</a> whenever angular tries to update it's view.</p>
  
  <p>The issue disappears when I remove <code>ng-include</code> from this simple repeat statement:</p>
  
  <pre><code>&lt;div class="container" ng-repeat="pageName in pageNames"&gt;
    &lt;div ng-include="pageName"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Weirdest part: The <code>exact same error</code> occurs even if <code>pageNames</code> is never assigned to the scope. Both scopes (the scope of outer and inner controller - I have each one) can be completely empty (I checked with Batarang - I only have two empty scopes), and I still get the error.</p>
  
  <p>My code is a bit too involved, with too many other dependencies, so posting it here makes no sense. It's purest version is the fiddle above. I cannot find a difference in the logic between the two. When I inspect my scopes with Batarang, I don't see anything suspicious either:</p>
  
  <ul>
  <li>I am not using functions in my scopes</li>
  <li>I did not make use of <code>$watch</code></li>
  <li>I did not make use of <code>ng-model</code></li>
  </ul>
  
  <p>I conclude that I am not explicitly changing anything, so it must be something under the hood of angular.</p>
  
  <p>Can I somehow get Angular or Batarang to tell me which scope variables have changed after a digest iteration, so I can identify the culprit causing the infinite loop?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I finally figured out that <code>history.pushState</code> messes everything up. I am now looking into alternatives, such as the <code>$location</code> service. Nevertheless, I would still like to know how to debug this kind of issue in general. Any hints?</p>