Javascript 引导角度折叠菜单与主菜单不同

好的，所以我的标题很糟糕，但是我需要帮助使我的折叠（移动）导航不同于非折叠（桌面）菜单

我希望折叠（移动）菜单利用主题数组，而不是html中的内容

任何帮助都将不胜感激

以下是我的html代码：

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="NavbarCtrl">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">    
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="tester collapse navbar-collapse" ng-class="!navCollapsed && 'in'">
      <ul class="nav navbar-nav navbar-left topmenu-left">
        <li ng-repeat="a in subjects"><a href="#">{{a}}</a><li>
      </ul>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-left topmenu-left">
       <li><a ui-sref="home">Home</a></li>
       <li><a ui-sref="about">About</a></li>
       <li><a ui-sref="team">Team</a></li>
       <li><a ui-sref="contact">Contacts</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right topmenu-right">
       <li><a ui-sref="home">Search Bar</a></li>
       <li><a ui-sref="home">Sign In</a></li>
      </ul>
    </div>

---

现在还不清楚代码中的问题是什么：渲染是可以的，它只需要为每个主题提供适当的链接……是的，所以这就是我想要弄明白的。如何将主题数组数据添加到可折叠菜单，而不是“主页”“关于”等菜单。我想要两个基本不同的菜单，一个用于桌面视图，即“主页”etc导航列表，另一个用于移动可折叠导航的主题数组。我只是不知道如何使主题数组成为可折叠菜单。为什么不使用CSS@media query在未折叠时隐藏移动折叠菜单？看这个例子，我在想，我只是觉得有一些更“角度”的东西可以做到这一点。好的，谢谢，我会投票支持你的回答。

.controller('NavbarCtrl', function ($scope, $location, $stateParams, $state)
{
  $scope.subjects = ['Math', 'Physics', 'Chemistry', 'Hindi', 'English'];
});