Estoy tratando de crear una vista de árbol usando AngularJS.

Aquí está mi código:

module.directive('treeview', function () {
    return {
        restrict: 'E',
        templateUrl: "/templates/ui/controls/treeview.htm",
        replace: true,
        transclude: true,
        scope: {},
        link: function (scope, element, attrs) {
            console.log("treeview directive loaded");
        },
        controller: function ($scope, $rootScope) {
            $rootScope.depth = 0;
            $scope.items = [
                { text: "face" },
                { text: "palm" },
                {
                    text: "cake",
                    childitems: [
                        { text: "1 face" },
                        { text: "1 palm" },
                        { text: "1 cake" }
                    ]
                }
            ];
        }
    };
});

module.directive('treeviewItem', function () {
    return {
        restrict: 'E',
        templateUrl: "/templates/ui/controls/treeview-item.htm",
        replace: true,
        scope: {
            item: "="
        },
        link: function (scope, element, attrs) {
            console.log("treeview item directive loaded");
        }
    };
});

Plantilla Treeview:

<div class="sl-treeview">
    <ul class="clear" ng-transclude>
        <treeview-item ng-repeat="item in items" item="item"></treeview-item>
    </ul>
</div>

Plantilla del artículo del Treeview:

<li>
    <i class="icon-plus-sign"></i>
    <a href="/">
        <i class="icon-folder-close"></i>
        {{item.text}}
    </a>
    <!-- This ul is the issue - it crashes the page -->
    <ul>
        <treeview-item ng-repeat="childitem in item.childitems" item="childitem"></treeview-item>
    </ul>
</li>

En la directiva treeview$scope.items está codificado para el desarrollo; eventualmente espero que esto provenga de un controlador / servicio que extraiga datos del servidor. Sin embargo, representa el tipo de estructura básica que estoy buscando.

Cuando ejecuto esto sin la ul anidada en treeviewItem, los tres primeros elementos están bien. Cuando agrego la ul para intentar obtener los controles para enlazar con elementos secundarios, entrega la página y deja de funcionar.

JSFiddle sin ul anidado - trabajando:

http://jsfiddle.net/BdmV3/

JSFiddle con anidado ul - no funciona (¡y puede colgar su navegador!):

http://jsfiddle.net/SKPpv/

¿Cómo debo hacer para crear un control que use una directiva personalizada y ngRepeat para crear niveles de recursión potencialmente infinitos? ¿Por qué no funciona mi enfoque?