I am trying to display a binary tree of elements, which I go through recursively with ng-include.

What is the difference between `ng-init=&quot;item = item.left&quot;` and `ng-repeat=&quot;item in item.left&quot;` ?
In this example it behaves exactly the same, but I use similiar code in a project and there it behaves differently. I suppose it&#39;s because of Angular scopes.
Maybe I shouldn&#39;t use ng-if, please explain me how to do it better.

The pane.html is:

    &lt;div ng-if=&quot;!isArray(item.left)&quot;&gt;
        &lt;div ng-repeat=&quot;item in [item.left]&quot; ng-include=&quot;&#39;Views/pane.html&#39;&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div ng-if=&quot;isArray(item.left)&quot;&gt;
        {{item.left[0]}}
    &lt;/div&gt;
    &lt;div ng-if=&quot;!isArray(item.right)&quot;&gt;
        &lt;div ng-repeat=&quot;item in [item.right]&quot; ng-include=&quot;&#39;Views/pane.html&#39;&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div ng-if=&quot;isArray(item.right)&quot;&gt;
        {{item.right[0]}}
    &lt;/div&gt;

    &lt;div ng-if=&quot;!isArray(item.left)&quot;&gt;
        &lt;div ng-init = &quot;item = item.left&quot; ng-include=&quot;&#39;Views/pane.html&#39;&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div ng-if=&quot;isArray(item.left)&quot;&gt;
        {{item.left[0]}}
    &lt;/div&gt;
    &lt;div ng-if=&quot;!isArray(item.right)&quot;&gt;
        &lt;div ng-init=&quot;item = item.right&quot; ng-include=&quot;&#39;Views/pane.html&#39;&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div ng-if=&quot;isArray(item.right)&quot;&gt;
        {{item.right[0]}}
    &lt;/div&gt;

The controller is:

    var app = angular.module(&#39;mycontrollers&#39;, []);

    app.controller(&#39;MainCtrl&#39;, function ($scope) {

        $scope.tree = {
            left: {
                left: [&quot;leftleft&quot;],
                right: {
                    left: [&quot;leftrightleft&quot;],
                    right: [&quot;leftrightright&quot;]
                }
            },
            right: {
                left: [&quot;rightleft&quot;],
                right: [&quot;rightright&quot;]
            }
        };

        $scope.isArray = function (item) {
            return Array.isArray(item);
        }
    });


EDIT:
First I run into the problem that the directive ng-repeat has a greater priority than ng-if. I tried to combine them, which failed. IMO it&#39;s strange that ng-repeat dominates ng-if.


All Angularjs Ng-Init Solutions on Gang of Coders

Total of 1 Angularjs Ng-Init Solutions

Pass parameter to Angular ng-include