AngularJS使用动态数据构建动态导航

Question

我尝试使用子导航进行导航。 我用AJAX获得的所有导航数据。 我可以有无限子项。导航项目有不同的类型，其中一些可以有其他子项目没有。我已经在菜单中显示所有父母：

• 顶级1
• 顶级2
• 顶级......
• 顶级X

当我点击最高级别1 时，我会看到：

• 顶级1
  • sublevel 1
  • sublevel 2
  • sublevel ......
  • sublevel X

然后，如果我点击 sublevel 2 ，我会看到：

• 顶级1
  • sublevel 2
    • sub sublevel ...
    • sub sublevel X

等

我的指示html：

<div class="leftNav">
    <ul class="nav nav-pills nav-stacked topLevel" role="tablist">
        <li class="title"><a>Sports</a></li>
        <li ng-repeat="titleTop in leftNavData track by titleTop.id" ng-show="titleTop.id == activeNavId || activeNavId == undefined ">
            <a ng-click="getSubItemData(titleTop.id)">{{titleTop.name}}</a>
            <ul class="subitems nav nav-pills nav-stacked" >
                <li class="subitem" ng-repeat="subItem in subNavData" ng-show="subItem.parents[0].id == activeNavId">
                <a class="sublink">{{subItem.name}}{{subItem.type}}</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

我的控制器：

controllers.controller('leftNavCtrl', ['$scope', '$http', 'leftNavDataService', 'CONST_DATA',
    function($scope, $http, leftNavDataService) {
        leftNavDataService.getNavigationData().then(function(data) {
            $scope.leftNavData = data;
            // console.log($scope.leftNavData);
        });

        $scope.getSubItemData = function(id) {
            leftNavDataService.getSubNavData(id).then(function(data) {
                $scope.subNavData = data;
                console.log($scope.subNavData);
                if ($scope.activeNavId == id) {
                    $scope.activeNavId = undefined;
                } else {
                    $scope.activeNavId = id;
                }
            });
        }

    }
])

我的服务：

services.factory('leftNavDataService', function($http) {
    return {
        getNavigationData: function() {
            //return the promise directly.
            return $http({
                url: '/api/sports',
                method: 'GET',
            }).then(function(result) {
                return result.data;
            });
        }, 

        getSubNavData: function(id) {
            //return the promise directly.
            return $http({
                url: '/api/competitions/' + id,
                method: 'GET',
            }).then(function(result) {
                return result.data;
            });
        }
    }
});

我如何构建这样的导航？