Collapse not showing the list genereted with ng-repeat in Angular

Question

I'm currently trying to build an app with angular.js and bootstrap ui and I'm stacked with a collapse navigation.

The problem is that I have a ng-repeat that should work but when I click the nav-bar it looks like it collapses but doesn't show any element inside. This is my HTML markup.

<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>

And this is my script

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;

});

I tried with fiddle to build the list and I saw that It's not a problem of the way the ng-repeat it's done.

I really don't see my mistake so I hope you can help me, It must be a silly mistake...

Thanks

Answer 1

For some reason, it does not seem to like having to controller attached to an anchor Changing the <a href="#" ng-controller="CollapseCtrl"> to <div style="cursor: pointer;" ng-controller="CollapseCtrl"> seems to do the trick. So would putting the div right around the anchor, if you need the href="#" for something other than the pointer appearance.

See the plunkr: http://plnkr.co/edit/6dLaOacDhHnc6038Y5MN?p=preview