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

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

我期待这样的结果：

1.主题
页面名称
-类别
类别1
说明
类别2
描述
-子类别
sub1
说明
sub2
说明

我的app.js：

angular.module（'app'，['angular.filter']））
.controller（'MainController'，函数（$scope）{
$scope.items=
[{“$id”：“1”，
“用户ID”：1，
“主题”：“主题”，
“topicOrderId”：1，
“类别”：“类别1”，
“catOrderId”：1，
“子类别”：“sub1”，
“副torderId”：1，
“页面名称”：“页面名称1”，
“pageId”：1，
“url”：“仪表板/索引”，
“说明”：“说明1”，
“工具提示”：“主题1”}，
{“$id”：“2”，
“用户ID”：1，
“主题”：“主题”，
“topicOrderId”：1，
“类别”：“类别1”，
“catOrderId”：1，
“子类别”：“sub2”，
“副torderId”：1，
“页面名称”：“页面名称2”，
“pageId”：1，
“url”：“仪表板/index2”，
“说明”：“说明2”，
“工具提示”：“主题2”}，
{“$id”：“3”，
“用户ID”：1，
“主题”：“主题”，
“topicOrderId”：1，
“类别”：“类别2”，
“catOrderId”：1，
“子类别”：“sub4”，
“副torderId”：1，
“页面名称”：“页面名称3”，
“pageId”：1，
“url”：“仪表板/index3”，
“说明”：“说明3”，
“工具提示”：“主题4”}，
{“$id”：“4”，
“用户ID”：1，
“主题”：“主题”，
“topicOrderId”：1，
“类别”：“类别3”，
“catOrderId”：1，
“子类别”：“sub3”，
“副torderId”：1，
“页码名称”：“页码名称4”，
“pageId”：1，
“url”：“仪表板/index4”，
“说明”：“说明4”，
“工具提示”：“主题4”}，
{“$id”：“5”，
“用户ID”：1，
“主题”：“主题”，
“topicOrderId”：1，
“类别”：“类别2”，
“catOrderId”：1，
“子类别”：“sub5”，
“副torderId”：1，
“页码名称”：“页码名称5”，
“pageId”：1，
“url”：“仪表盘2/索引”，
“说明”：“说明5”，
“工具提示”：“主题5”}]；
});

和我的html文件：

{{key}}
{{value.pageName}}

{{key}}

{{val.description}}


{x.子类别}

在这里，我想按主题和分组类别分组，逻辑工作正常，但我无法打印页面名称、描述的值 请让我知道怎么做