Recursive Ng-include causing Error: $rootScope:infdig Infinite $digest Loop

Question

I have a recursive Ng-include which leads to Error: $rootScope:infdig Infinite $digest Loop

In my ctrl:

function getTemplate(elementType) {
        console.log(elementType + '_formElement.html');
        return elementType + '_formElement.html';
    };

In my view:

<div ng-repeat="element in elementList track by $index" ng-init="templateID=vm.getTemplate(element.elementType)">
    <ng-include src="templateID"></ng-include>
</div>

Result: 10 $digest() iterations reached. Aborting!

Watchers fired in the last 5 iterations: [[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":3},{"msg":"fn: function (a){return d(a)}","newVal":""},{"msg":"templateID","newVal":"ROW_formElement.html"}],[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":3},{"msg":"fn: function (a){return d(a)}","newVal":""},{"msg":"templateID","newVal":"ROW_formElement.html"}],[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":3},{"msg":"fn: function (a){return d(a)}","newVal":""},{"msg":"templateID","newVal":"ROW_formElement.html"}],[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":3},{"msg":"fn: function (a){return d(a)}","newVal":""},{"msg":"templateID","newVal":"FIELD_formElement.html"}],[{"msg":"templateID","newVal":"TEXT_field.html"},{"msg":"fn: function (a){return d(a)}","newVal":""}]]

Console.log:

  ROW_formElement.html
7 ROW_formElement.html
  FIELD_formElement.html

I know I can increase TTL like following, but is there any other solution?

angular.module('myApp',[]) .config(function($rootScopeProvider) { $rootScopeProvider.digestTtl(number); //some number bigger then 10 })

Can you provide a working code sample somehow? The digest cycle seems to re-re-re-re-run by continious value changes. — daan.desmedt
It's the function I have posted, sorry i changed its name. I will try to create a plnkr when I have the time. — Olezt

Olezt Olezt · Accepted Answer · 2016-11-29T15:33:32

After searching a lot, I think there is no error in my code.

As answered here and shown in this plunkr this is just how angular works.
There seems to be no other solution other than setting a higher digest TTL number than 10.

angular.module('myApp',[]) .config(function($rootScopeProvider) { $rootScopeProvider.digestTtl(number); //some number bigger then 10 })

Recursive Ng-include causing Error: $rootScope:infdig Infinite $digest Loop

2 Answers