Javascript 折叠不显示在角度中使用ng repeat生成的列表

我目前正在尝试用angular.js和bootstrap用户界面构建一个应用程序，我正在使用折叠导航

问题是，我有一个ng重复，应该可以工作，但当我点击导航栏时，它看起来像是折叠了，但里面没有显示任何元素。这是我的HTML标记

<a href="#" ng-controller="CollapseCtrl">
    <ul class="list-unstyled">
        <li class="nav-header"> 
            <a href="#" ng-click="isCollapsed = !isCollapsed" ><h5>Settings 
                <i class="glyphicon glyphicon-chevron-right"></i></h5>
            </a>
            <ul class="list-unstyled collapse in" collapse="isCollapsed">
                <li ng-repeat="element in first"><a href="#"><i class='{{element.icon}}'></i>{{element.title}}</a></li>
            </ul>
        </li>
    ......Some other nav-header with other lists
    </ul>
</a>

我试着用fiddle建立列表，我发现这不是ng重复的方式问题

我真的不明白我的错误，所以我希望你能帮助我，这一定是一个愚蠢的错误

---

感谢

出于某种原因，它似乎不喜欢将控制器连接到锚点

---

更改

我不知道为什么那个愚蠢的事情是错误的，但你是对的！！非常有帮助，非常感谢！
var myAppModule = angular.module('myApp', ['ui.bootstrap']);
myAppModule.controller('CollapseCtrl', function($scope) {

    $scope.first = [
        {title : 'Home', icon : 'glyphicon glyphicon-home' },
        {title : 'Messages', icon : 'glyphicon glyphicon-envelope' },
        {title : 'Options', icon : 'glyphicon glyphicon-cog' },
        {title : 'Shoutbox', icon : 'glyphicon glyphicon-comment' },
        {title : 'Staff List', icon : 'glyphicon glyphicon-user' },
        {title : 'Transactions', icon : 'glyphicon glyphicon-flag' },
        {title : 'Rules', icon : 'glyphicon glyphicon-exclamation-sign' },
        {title : 'Logout', icon : 'glyphicon glyphicon-off' }
    ];

    $scope.isCollapsed = false;

});