using angular js collapse function on panels html 5.0 - html

Question

Basically Currently I have html code which builds a layout of panels and I want to basically expand and collapse these panels , for some reason when i load the assets and run my app , the panels appear collapsed but does not expand when i click the panel title the code is below , i am using angular js with html5 . if someone can help quick i would appreciate that.
<div class="row clearfix" >
<div ng-repeat="i in ctrl.coreControlpanelItems" class="col-md-12 column" >
<div ng-class="{'panel-primary': hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false" class="panel panel-default animated fadeInUp">
<div class="panel-heading">
<i class="pull-left {{i.icon}}"/>
<h5 class="panel-title">
<a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed">
<a ui-sref="{{i.ref}}">{{i.group}}</a>
</a>
</h5>
</div>
<div ng-show="collapsed">
<div class="panel-body ">
<ul>
<li ng-repeat="s in i.items"><a ui-sref="{{s.ref}}">{{s.name}}<a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

First of all, you have nested a tags in your panel-title element. That's a no-no.
Second, you're can't put ng-model on an a tag.
Third, your panel-title is supposed to expand something but you also have a link inside of it which if clicked on would negate what you're trying to do with the expanding...