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

Question

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

1.5k Views Asked by klode At 04 April 2025 at 01:10

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

The template test.html is never included.
<h1>Testing</h1> is repeated many, many times.
I get the following
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
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

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>

Original Q&A

There are 1 best solutions below

**klode** · Accepted Answer

The source of the error is a wrong path for the html template to be included. If the template path is incorrect and does not match any server route the sever default is to serve the whole index.html. This initiates an infinite loop because upon loading index.html the include template is requested again with the wrong path and index.html is served, and included, again and again and again .. resulting in the "10 $digest() iterations reached" error

In my case the correct path to request the test.htmlfrom the server is static/src/views/test.html.

Changing the include from this

<div ng-include="'test.html'"> </div>

to this

<div ng-include="'static/src/views/test.html'"> </div>

solves the problem.

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

Testing

Testing

Testing

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in ANGULARJS-NG-INCLUDE

Trending Questions

Popular # Hahtags

Popular Questions