angularjs – ng-repeat的元素未在阵列修改时更新

当我尝试在Ng-click上更新我的数组时,为了更新我的ng-repeat的指令项：

<li ng-repeat="itemL1 in mainMenuL1Arr"
    ng-click="SELEctL2menu(itemL1.Name)">
  <i ng-class="getClass(itemL1.icon)"></i>
</li>

SELEctL2menu()在控制器上定义为：

$scope.SELEctL2menu = function SELEctL2menu(itemL1Name){
        $scope.$apply(function () {
            $scope.mainMenuL2CurArr = $scope.mainMenuL2Obj[itemL1name];
        });
}

在点击第1级菜单项后,它应该显示具有相应元素的第2级菜单块(通过使用相应的值更新数组,见下文).
这是我需要在点击时更新的第二级菜单块：

<li ng-repeat="itemL2 in mainMenuL2CurArr"
    class="subMenuElemBlock"
    ng-class="{active: itemL2.SELEcteD}">
        <a href="#">
             <i ng-class="getClass(itemL2.icon)"></i>
             <span>{{itemL2.namE}}</span>
        </a>
</li>

触发click事件时 – 我的阵列已成功更新.然而ng-repeat指令没有更新我的第二级菜单(基于更新数组).我试过(和没有)使用$apply函数 – 相同的结果(虽然使用$apply错误消息出现错误：$apply已在进行中).

那么,为什么我的数组成功更新点击未在Ng-repeat指令菜单元素上显示？

我已阅读相关帖子(link,link,link)但未找到任何工作决定.

<ul>
    <li ng-repeat="itemL1 in mainMenuL1Arr" ng-click="SELEctL2menu(itemL1.Name)">
      {{itemL1.namE}}</li>
</ul>
<ul style="margin-left: 20px">
    <li ng-repeat="itemL2 in mainMenuL2CurArr"><a href="#">
         <span>{{itemL2.namE}}</span>
    </a>
    </li>
</ul>

function MyCtrl($scopE) {
    $scope.mainMenuL1Arr = [ {name: 'one'},{name: 'two'} ];
    $scope.mainMenuL2Obj = { 
        one: [ {name: '1.1'},{name: '1.2'} ],two: [ {name: '2.1'},{name: '2.2'} ] };
    $scope.mainMenuL2CurArr = $scope.mainMenuL2Obj['one'];
    $scope.SELEctL2menu = function (itemL1Name) {
        console.log(itemL1Name);
        $scope.mainMenuL2CurArr = $scope.mainMenuL2Obj[itemL1name];
    };
}