Html angularjs中的多级导航菜单

我正在编写一个多级动态菜单，从后端获取菜单数据，并使用UI-LI标记构建菜单项。其代码如下所示：

HTML

<ul class="menu">
   <li ng-class="{ active: topController.currentMenuItem === item.Id }" ng-repeat="item in topController.menuItems">
       <a ng-click="topController.currentMenuItem = item.Id">{{::item.Title}}</a>
        <ul class="sec-nav" ng-if="item.SubMenu.length">
            <li ui-sref-active="active" ng-repeat="child in item.SubMenu">
               <a ui-sref="{{::child.State}}">{{::child.Title}}</a>
            </li>
        </ul>
   </li>
</ul>

从后端返回的菜单项

Fruits       Cars      Country       Hobbies   Weather      Dresses
 - Apple      - BMW     - England               - Autumn
 - Orange     - Audi    - Wales                 - Winter

菜单确实构建并显示ok无问题，但我遇到的问题是展开和折叠。当我单击任何父菜单项时，子菜单项会展开，但当我单击父菜单项或任何其他父菜单项时，菜单不会折叠，而是保持活动状态

我需要知道，我对上面的代码做了哪些更改，这样当我单击父项时，子菜单项应该被取消激活

---

另外，我没有编写指令的经验，因此如何将这段代码转换为指令，以便我可以在应用程序中的任何位置重复使用此菜单。

您能提供plunker或JSFIDLE吗？plunker链接如下：

Fruits       Cars      Country       Hobbies   Weather      Dresses
 - Apple      - BMW     - England               - Autumn
 - Orange     - Audi    - Wales                 - Winter