ng-include recursively including whole index.html, and giving error "10 $digest() iterations reached"

Viewed 1559

I am having the following problem with ng-include. What am I missing? Anybody had a similar issue?

  1. The template test.html is never included.
  2. <h1>Testing</h1> is repeated many, many times.
  3. I get the following
    Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
  4. Inspecting the html elements in the browser, shows that the whole index.html is recursively included by ng-include.

What I am doing is a simple test with a stripped down index.html

index.html

<html>
  <head>
    <link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/src/css/app.css" rel="stylesheet">
    <script src="static/bower-components/angular/angular.js"></script>
    <script src="static/bower-components/angular-route/angular-route.js"></script>
    <script src="static/bower-components/angular-bootstrap/ui-bootstrap-tpls.js"></script> 
    <script src="static/src/js/app.js"></script>
    <script src="static/src/js/services.js"></script>
    <script src="static/src/js/controllers.js"></script>
    <script src="static/src/js/filters.js"></script>
    <script src="static/src/js/directives.js"></script>
  </head>

  <body  ng-app="myApp">
    <h1> Testing </h1>
    <div ng-include="'test.html'"> </div>
  </body>

</html>

test.html

<h3> included template </h3>

In the browser I get:

Testing

Testing

....

Testing

Inspecting the html in the browser, shows the recursive inclusion of index.html:

<body ng-app="myApp" class="ng-scope">

<h1> Testing </h1>

<!-- ngInclude: 'test.html' --><div ng-include="'test.html'" class="ng-scope">

<link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet" class="ng-scope">
<link href="static/src/css/app.css" rel="stylesheet" class="ng-scope">
<script src="static/bower-components/angular/angular.js" class="ng-scope"></script>
<script src="static/bower-components/angular-route/angular-route.js" class="ng-scope"></script>
<script src="static/bower-components/angular-bootstrap/ui-bootstrap-tpls.js" class="ng-scope"></script> 
<script src="static/src/js/app.js" class="ng-scope"></script>
<script src="static/src/js/services.js" class="ng-scope"></script>
<script src="static/src/js/controllers.js" class="ng-scope"></script>
<script src="static/src/js/filters.js" class="ng-scope"></script>
<script src="static/src/js/directives.js" class="ng-scope"></script>


<h1 class="ng-scope"> Testing </h1>

<!-- ngInclude: 'test.html' --><div ng-include="'test.html'" class="ng-scope">

<link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet" class="ng-scope">
<link href="static/src/css/app.css" rel="stylesheet" class="ng-scope">
<script src="static/bower-components/angular/angular.js" class="ng-scope"></script>
<script src="static/bower-components/angular-route/angular-route.js" class="ng-scope"></script>
<script src="static/bower-components/angular-bootstrap/ui-bootstrap-tpls.js" class="ng-scope"></script> 
<script src="static/src/js/app.js" class="ng-scope"></script>
<script src="static/src/js/services.js" class="ng-scope"></script>
<script src="static/src/js/controllers.js" class="ng-scope"></script>
<script src="static/src/js/filters.js" class="ng-scope"></script>
<script src="static/src/js/directives.js" class="ng-scope"></script>

<h1 class="ng-scope"> Testing </h1>

<!-- ngInclude: 'test.html' --><div ng-include="'test.html'" class="ng-scope">

<link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet" class="ng-scope">
<link href="static/src/css/app.css" rel="stylesheet" class="ng-scope">
<script src="static/bower-components/angular/angular.js" class="ng-scope"></script>
<script src="static/bower-components/angular-route/angular-route.js" class="ng-scope"></script>
<script src="static/bower-components/angular-bootstrap/ui-bootstrap-tpls.js" class="ng-scope"></script> 
<script src="static/src/js/app.js" class="ng-scope"></script>
<script src="static/src/js/services.js" class="ng-scope"></script>
<script src="static/src/js/controllers.js" class="ng-scope"></script>
<script src="static/src/js/filters.js" class="ng-scope"></script>
<script src="static/src/js/directives.js" class="ng-scope"></script>

<h1 class="ng-scope"> Testing </h1>

<!-- ngInclude: 'test.html' --><div ng-include="'test.html'" class="ng-scope">

<link href="static/bower-components/bootstrap-css/css/bootstrap.min.css" rel="stylesheet" class="ng-scope">

    .......
    ...
</div>
</div>
</body>
1 Answers
Related