为什么我达到了 $digest (） 迭代?如何跟踪递归脚本的活动

我试图理解我的递归脚本，它的效率很低。

尝试创建计数器，告诉我它被调用了多少次以及从哪里调用，这样我就可以更好地理解它的行为。但是，我在控制台中收到错误，指出它重载了它可以调用的迭代次数：

Uncaught Error: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: function (context) {'n          for(var i = 0, ii = length, part; i<ii; i++) {'n            if (typeof (part = parts[i]) == 'function') {'n  .........

在进行了大量阅读之后，我有一种强烈的感觉，这与 Angular 每次更新计数器时重新计算所有内容有关，$watch认为这是一种变化，引发了新的$digest轮。这是对的吗？

如果是这样，如何在递归脚本上实现计数器？

为了提供一个与我正在尝试做的事情非常相似的例子，我用ganarajpr分叉了一个JSFiddle，并添加到这里：JSFiddle。

根据 Stackoverflow 的要求，代码复制如下：

.HTML：

<div ng-app="myApp">
<div ng-controller="MainCtrl">
<script type="text/ng-template"  id="tree_item_renderer.html">
    {{incrementCounter()}}
    {{data.name}}
    <button class="btn btn-primary" ng-click="add(data)">Add node</button>
    <button class="btn btn-primary" ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</script>
<ul ng-app="Application" ng-controller="TreeController">
    <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
</ul>
    <h3> Counter {{counter}}</h3>
</div>
</div>

Javascript：

var app = angular.module("myApp", []);
app.controller("MainCtrl", ['$scope', function ($scope) {
    $scope.counter = 0;
    $scope.incrementCounter = function () {
        console.log("Increment called");
        $scope.counter++;
        document.counter++;
    }
}]);
app.controller("TreeController", ['$scope', function ($scope) {
    $scope.delete = function (data) {
        data.nodes = [];
    };
    $scope.add = function (data) {
        var post = data.nodes.length + 1;
        var newName = data.name + '-' + post;
        data.nodes.push({
            name: newName,
            nodes: []
        });
    };
    $scope.tree = [{
        name: "Node",
        nodes: []
    }];
}]);