title: ng-include recursively including whole index.html, and giving error "10 $digest() iterations reached"
body: <p>I am having the following problem with ng-include. What am I missing? Anybody had a similar issue?</p>
  
  <ol>
  <li>The template <code>test.html</code> is never included.</li>
  <li><code>&lt;h1&gt;Testing&lt;/h1&gt;</code> is repeated many, many times. </li>
  <li>I get the following<br>
  <code>Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!</code></li>
  <li>Inspecting the html elements in the browser, shows that the whole index.html is recursively included by ng-include.</li>
  </ol>
  
  <p>What I am doing is a simple test with a stripped down index.html </p>
  
  <p><strong>index.html</strong> </p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="static/src/css/app.css" rel="stylesheet"&gt;
      &lt;script src="static/bower-components/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script src="static/bower-components/angular-route/angular-route.js"&gt;&lt;/script&gt;
      &lt;script src="static/bower-components/angular-bootstrap/ui-bootstrap-tpls.js"&gt;&lt;/script&gt; 
      &lt;script src="static/src/js/app.js"&gt;&lt;/script&gt;
      &lt;script src="static/src/js/services.js"&gt;&lt;/script&gt;
      &lt;script src="static/src/js/controllers.js"&gt;&lt;/script&gt;
      &lt;script src="static/src/js/filters.js"&gt;&lt;/script&gt;
      &lt;script src="static/src/js/directives.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body  ng-app="myApp"&gt;
      &lt;h1&gt; Testing &lt;/h1&gt;
      &lt;div ng-include="'test.html'"&gt; &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>test.html</strong></p>
  
  <pre><code>&lt;h3&gt; included template &lt;/h3&gt;
  </code></pre>
  
  <p>In the browser I get: </p>
  
  <p><h1>Testing</h1>
     <h1>Testing</h1>
           ....
     <h1>Testing</h1></p>
  
  <p>Inspecting the html in the browser, shows the recursive inclusion of index.html:</p>
  
  <pre><code>&lt;body ng-app="myApp" class="ng-scope"&gt;
  
  &lt;h1&gt; Testing &lt;/h1&gt;
  
  &lt;!-- ngInclude: 'test.html' --&gt;&lt;div ng-include="'test.html'" class="ng-scope"&gt;
  
  &lt;link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet" class="ng-scope"&gt;
  &lt;link href="static/src/css/app.css" rel="stylesheet" class="ng-scope"&gt;
  &lt;script src="static/bower-components/angular/angular.js" class="ng-scope"&gt;&lt;/script&gt;
  &lt;script src="static/bower-components/angular-route/angular-route.js" class="ng-scope"&gt;&lt;/script&gt;
  &lt;script src="static/bower-components/angular-bootstrap/ui-bootstrap-tpls.js" class="ng-scope"&gt;&lt;/script&gt; 
  &lt;script src="static/src/js/app.js" class="ng-scope"&gt;&lt;/script&gt;
  &lt;script src="static/src/js/services.js" class="ng-scope"&gt;&lt;/script&gt;
  &lt;script src="static/src/js/controllers.js" class="ng-scope"&gt;&lt;/script&gt;
  &lt;script src="static/src/js/filters.js" class="ng-scope"&gt;&lt;/script&gt;
  &lt;script src="static/src/js/directives.js" class="ng-scope"&gt;&lt;/script&gt;
  
  
  &lt;h1 class="ng-scope"&gt; Testing &lt;/h1&gt;
  
  &lt;!-- ngInclude: 'test.html' --&gt;&lt;div ng-include="'test.html'" class="ng-scope"&gt;
  
  &lt;link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet" class="ng-scope"&gt;
  &lt;link href="static/src/css/app.css" rel="stylesheet" class="ng-scope"&gt;
  &lt;script src="static/bower-components/angular/angular.js" class="ng-scope"&gt;&lt;/script&gt;
  &lt;script src="static/bower-components/angular-route/angular-route.js" class="ng-scope"&gt;&lt;/script&gt;
  &lt;script src="static/bower-components/angular-bootstrap/ui-bootstrap-tpls.js" class="ng-scope"&gt;&lt;/script&gt; 
  &lt;script src="static/src/js/app.js" class="ng-scope"&gt;&lt;/script&gt;
  &lt;script src="static/src/js/services.js" class="ng-scope"&gt;&lt;/script&gt;
  &lt;script src="static/src/js/controllers.js" class="ng-scope"&gt;&lt;/script&gt;
  &lt;script src="static/src/js/filters.js" class="ng-scope"&gt;&lt;/script&gt;
  &lt;script src="static/src/js/directives.js" class="ng-scope"&gt;&lt;/script&gt;
  
  &lt;h1 class="ng-scope"&gt; Testing &lt;/h1&gt;
  
  &lt;!-- ngInclude: 'test.html' --&gt;&lt;div ng-include="'test.html'" class="ng-scope"&gt;
  
  &lt;link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet" class="ng-scope"&gt;
  &lt;link href="static/src/css/app.css" rel="stylesheet" class="ng-scope"&gt;
  &lt;script src="static/bower-components/angular/angular.js" class="ng-scope"&gt;&lt;/script&gt;
  &lt;script src="static/bower-components/angular-route/angular-route.js" class="ng-scope"&gt;&lt;/script&gt;
  &lt;script src="static/bower-components/angular-bootstrap/ui-bootstrap-tpls.js" class="ng-scope"&gt;&lt;/script&gt; 
  &lt;script src="static/src/js/app.js" class="ng-scope"&gt;&lt;/script&gt;
  &lt;script src="static/src/js/services.js" class="ng-scope"&gt;&lt;/script&gt;
  &lt;script src="static/src/js/controllers.js" class="ng-scope"&gt;&lt;/script&gt;
  &lt;script src="static/src/js/filters.js" class="ng-scope"&gt;&lt;/script&gt;
  &lt;script src="static/src/js/directives.js" class="ng-scope"&gt;&lt;/script&gt;
  
  &lt;h1 class="ng-scope"&gt; Testing &lt;/h1&gt;
  
  &lt;!-- ngInclude: 'test.html' --&gt;&lt;div ng-include="'test.html'" class="ng-scope"&gt;
  
  &lt;link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet" class="ng-scope"&gt;
  
      .......
      ...
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>