ng-include recursively including whole index.html, and giving error "10 $digest() iterations reached"
angularjs, angularjs-ng-include, javascript
Solution
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.html`from 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.
Problem
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 .... 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> ```