Eu estou tentando exibir uma árvore binária de elementos, pela qual passo recursivamente com o ng-include.

Qual é a diferença entreng-init="item = item.left" eng-repeat="item in item.left" ? Neste exemplo, ele se comporta exatamente da mesma forma, mas eu uso código semelhante em um projeto e lá se comporta de maneira diferente. Suponho que seja por causa dos escopos angulares. Talvez eu não deva usar ng-if, por favor me explique como fazê-lo melhor.

O pane.html é:

<div ng-if="!isArray(item.left)">
    <div ng-repeat="item in [item.left]" ng-include="'Views/pane.html'">
    </div>
</div>
<div ng-if="isArray(item.left)">
    {{item.left[0]}}
</div>
<div ng-if="!isArray(item.right)">
    <div ng-repeat="item in [item.right]" ng-include="'Views/pane.html'">
    </div>
</div>
<div ng-if="isArray(item.right)">
    {{item.right[0]}}
</div>

<div ng-if="!isArray(item.left)">
    <div ng-init = "item = item.left" ng-include="'Views/pane.html'">
    </div>
</div>
<div ng-if="isArray(item.left)">
    {{item.left[0]}}
</div>
<div ng-if="!isArray(item.right)">
    <div ng-init="item = item.right" ng-include="'Views/pane.html'">
    </div>
</div>
<div ng-if="isArray(item.right)">
    {{item.right[0]}}
</div>

O controlador é:

var app = angular.module('mycontrollers', []);

app.controller('MainCtrl', function ($scope) {

    $scope.tree = {
        left: {
            left: ["leftleft"],
            right: {
                left: ["leftrightleft"],
                right: ["leftrightright"]
            }
        },
        right: {
            left: ["rightleft"],
            right: ["rightright"]
        }
    };

    $scope.isArray = function (item) {
        retu,rn Array.isArray(item);
    }
});

Edição: Primeiro eu topar com o problema que a diretiva ng-repeat tem uma prioridade maior do que ng-if. Eu tentei combiná-los, o que falhou. OMI é estranho que ng-repeat domine ng-if.