如何在角度填充器中使用嵌套的groupBy

Question

我想开发一个使用JSON对象的动态菜单系统，因为我使用的是angular-fillter.js，但我无法获得正确的输出。

我期待这样说：

1.Topic
 PAGE_NAME
    - 类别
     cate1
      说明
    cate2
      descrption
         - 子类别
       SUB1
          说明
        SUB2
        描述

我的app.js：

angular.module('app',['angular.filter'])
.controller('MainController', function($scope) { 

$scope.items =
      [{"$id":"1",
"userid":1,
"topic":"topic",
"topicOrderId":1,
"category":"cate1",
"catOrderId":1,
"subCategory":"sub1",
"subCatOrderId":1,
"page_Name":"page_Name1",
"pageId":1,
"url":"dashboard/index",
"description":"description1",
"tooltip":"topic1"},
{"$id":"2",
"userid":1,
"topic":"topic",
"topicOrderId":1,
"category":"cate1",
"catOrderId":1,
"subCategory":"sub2",
"subCatOrderId":1,
"page_Name":"page_Name2",
"pageId":1,
"url":"dashboard/index2",
"description":"description2",
"tooltip":"topic2"},


{"$id":"3",
"userid":1,
"topic":"topic",
"topicOrderId":1,
"category":"cate2",
"catOrderId":1,
"subCategory":"sub4",
"subCatOrderId":1,
"page_Name":"page_Name3",
"pageId":1,
"url":"dashboard/index3",
"description":"description3",
"tooltip":"topic4"},

{"$id":"4",
"userid":1,
"topic":"topic",
"topicOrderId":1,
"category":"cate3",
"catOrderId":1,
"subCategory":"sub3",
"subCatOrderId":1,
"page_Name":"page_Name4",
"pageId":1,
"url":"dashboard/index4",
"description":"description4",
"tooltip":"topic4"},

{"$id":"5",
"userid":1,
"topic":"topic",
"topicOrderId":1,
"category":"cate2",
"catOrderId":1,
"subCategory":"sub5",
"subCatOrderId":1,
"page_Name":"page_Name5",
"pageId":1,
"url":"dashboard2/index",
"description":"description5",
"tooltip":"topic5"}];
});

和我的html文件：

<div class="navbar-collapse collapse sidebar-navbar-collapse">
    <ul class="nav navbar-nav" >
        <div  ng-repeat="(key, value) in items | groupBy: 'topic'" >
            <label> {{key}} </label>  
            <li> {{value.pageName}} </li>               
            <ul style="list-style-type: none">
                <div ng-repeat=" (key , val) in value | groupBy: 'category' ">  
                    <label>{{key}}</label>
                    <li>
                    {{val.description}}
                    </li>           
                    <ul style="list-style-type: none" >
                        <div ng-repeat="x in val"> 
                            <li>{{x.subCategory}} </li>
                        </div>
                    </ul>
                </div>
            </ul> 
        </div>
    </ul>   
</div>

这里我想按主题和组类别分组，逻辑工作正常但我无法打印page_Name的值，描述 请让我知道如何做到这一点