How to fix Error: [$rootScope:infdig] $rootScope/infdig?p0=10 error in angular?

Question

JavaScript

I'm working with nested tree-view builder angular-ui-tree . https://github.com/angular-ui-tree/angular-ui-tree
When I load 3-5 nodes into it, everything is OK, but when the data size is larger -20-30 nodes, an error pops up
Error: [$rootScope: infdig] angularjs/1.3.20/$rootScope/infdig?p0=10&p1=%5B%5B%7B%7D%…%7Breturn%20d(a)%7D%22%2C%22newVal%22%3A%22nodes_renderer.html %22%7D%5D%5D
at Error (native)
at an/bower_components/angular/angular.min.js:6:417
at n.$digest ( an/bower_components/angular/angular.min.js:124:445 )
at n.$apply ( an/bower_components/angular/angular.min.js:127:12)
at l ( an/bower_components/angular/angular.min.js:81:195)
at F (an/bower_components/angular/angular.min.js:85:314)
at XMLHttpRequest.C.onload ( an/bower_components/angular/angular.min.js:86:349)... function) @ angular.js:11706 (anonymous function) @ angular.js:8619n.$apply @ angular.js:14677l @ angular.js:9725F @ angular.js:9915C.onload @ angular.js:9856
angular.js:38 Uncaught Error: [$rootScope :infdig] http://errors.angularjs.org/1.3.20/$rootScope/infd... function) @ angular.js:38n.$digest @ angular.js:14450n.$apply @ angular.js:14675l @angular.js:9725F @angular.js:9915C.onload @angular.js:9856 The

specificity of the component is such that there is a serious nesting of some nodes into others. on the constructed data tree the error does not seem to be reflected.
how to defeat it?
Thanks

Answer 1

You have a recursive limitation of angular itself, by default TTL == 10, there are 2 solutions to this problem:
Option 1: If the recursion depth is known, you must set the TTL to the exact value.
Option 2: If the depth is unknown, set a TTL that you think you can't exceed.
In both cases, the TTL is set something like this:

angular.module('app', [], $rootScopeProvider => {
  $rootScopeProvider.digestTtl(15);
});