AngularJS多维数组调用ng repeat

我正在尝试在side_enu_angular.js中获取数组main的内部数组。数组的第一部分，我能够检测到它，并且它可以工作。从第二个病房开始就不起作用了。我的HTML结构略有不同，我认为这会影响对那些内部数组的调用。我做错了什么，还是错过了？以下是我的代码：

HTML

<div ng-app="theme" ng-controller="sideController">
    <div id="mainSlideout"> 
        <div id="mainSlideMenu">
            <ul style="list-style-type: none;">
                <li class="active" ng-repeat="main in menuName">
                    <h3><a class="mainMenuItem" id="photography">{{main.main_menu}}</a></h3>
                </li>
            </ul>
        </div>
    </div>
    <div id="slideout"> 
        <div id="slideMenu" >
            <ul style="list-style-type: none;" >
                <li class="active" ng-repeat-start="sub in menuName" ng-repeat="menus in sub.main_content">
                    <h3><a class="menuItem" id="{{menus.name}}">{{menus.name}}</a></h3>
                </li>
                <li id="{{subMenu.id}}" class="draggable {{menus.name}}" ng-repeat="subMenu in menus.element" ng-repeat-end>
                    <img ng-src="{{subMenu.template}}" id="{{subMenu.id}}" />
                </li>
            </ul>
        </div>
    </div>
</div>

side_enu_angular.js

    angular.module( 'theme' , [
    ] ).controller('sideController' , function($scope){
        $scope.menuName = [ 
        { main_menu:'Photography' , main_content:[
            { name:'Header' , element:[ 
                { id:'template1' , template:'wp-content/themes/dynamictheme/img/template/header/template1.png' }, 
                { id:'template2' , template:'wp-content/themes/dynamictheme/img/template/header/template2.png' }
                ]
            },
            { name:'Content' , element:[ 
                { id:'template3' , template:'wp-content/themes/dynamictheme/img/template/header/template3.png' }
                ]
            },
            { name:'Footer' , element:[ 
                { id:'template4' , template:'wp-content/themes/dynamictheme/img/template/header/template4.png' }
                ]
            }]
        }];
    })
;