如何根据我的要求充分利用ng-repeat？

Question

正如标题所暗示的那样，我有一些代码，我认为这是一种利用Angular JS'重复重复功能的非常冗长的方式。

我有两个列表，mainMenus和childMenus，childMenus会根据mainMenus中的选择而更改。

我的问题是我觉得我已经做了这么长时间了，而且我觉得我已经养成了一些不良习惯！我做错了什么，我该怎么做？

谢谢！

app.controller('servicesController', function($scope, $rootScope, $filter) {
        $rootScope.currentPage = "services";

        $scope.mainCurrent = "0";
        $scope.clickedMain = function(clicked){
            $scope.mainCurrent = clicked;
            $scope.childCurrent = "0";
        };

        $scope.childCurrent = "0";
        $scope.childCurrentId = "0";
        $scope.childCurrentIdSet = function(id){
            $scope.childCurrentId = id;
        }
        $scope.clickedChild = function(clicked){
            $scope.childCurrent = clicked;
        };

        $scope.mainMenus = [
            {id: "0", title:"Consult", glyphicon:"glyphicon glyphicon-earphone"},
            {id: "1", title:"Design", glyphicon:"glyphicon glyphicon-eye-open"},
            {id: "2", title:"Develop", glyphicon:"glyphicon glyphicon-console"},
            {id: "3", title:"Maintain", glyphicon:"glyphicon glyphicon-wrench"}
        ];

        $scope.childMenus = [
            {id: "0", title:"Design Preferences", childto:"0", body:"We will want to gather as many of your design preferences as we can - if any. Often we have a blank canvas where the customer has no specific requirements or wishes - This is fine!"},
            {id: "1", title:"Website Functionality", childto:"0"},
            {id: "2", title:"Price", childto:"0"},
            {id: "3", title:"Web Design", childto:"1"},
            {id: "4", title:"Print Design", childto:"1"},
            {id: "5", title:"Brand Design", childto:"1"},
            {id: "6", title:"CMS", childto:"2"},
            {id: "7", title:"Ecommerce", childto:"2"},
            {id: "8", title:"Web Development", childto:"2"},
            {id: "9", title:"Content Creation", childto:"2"},
            {id: "10", title:"Support", childto:"3"},
            {id: "11", title:"Maintenance", childto:"3"},
            {id: "12", title:"Hosting", childto:"3"},
            {id: "13", title:"Domain Registration", childto:"3"}
        ];

        $scope.mainSelected = function(main){
            return (main.childto == $scope.mainCurrent);
        };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-controller="servicesController as servicesC">

    <div class="container">

    <!-- MAIN LIST -->
        <div class="col-sm-3" ng-repeat="menu in mainMenus">
            <div class="panel panel-default pointer" ng-click="clickedMain($index)">
                <div class="panel-heading text-center" ng-class="{activePanel:$index == mainCurrent}">
                    <h3>{{menu.title}}</h3><br>
                    <span class="{{menu.glyphicon}} largeglyph"></span>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <ul class="list-group">
                <li class="list-group-item pointer" ng-class="{active:$index == childCurrent}" ng-repeat="menu in childMenus | filter:mainSelected" ng-click="clickedChild($index); childCurrentIdSet(menu.id)">
                    {{menu.title}}
                </li>
            </ul>
        </div>

    <!-- RESULT -->
        <div class="col-sm-6">
            <div class="jumbotron">
                <h2 style="border-bottom:3px #000 solid;">{{childMenus[childCurrentId].title}}</h2>
                <h4 class="text-center">{{childMenus[childCurrentId].body}}</h4>
            </div>
        </div>
    </div>
</div>