Bootstrap UI Collapse directive behaving weird - html

Question

I'm a bit stumped with a problem with the bootstrap.ui module for AngularJS.
This is my HTML:
<nav id="sidebar">
<ul id="main-nav" class="open-active">
<li ng-controller="CollapseCtrl" class="dropdown">
<a ng-click="isCollapsed = !isCollapsed" href="javascript:;">
<i class="fa fa-wrench"></i>
Verktøy
<span class="caret"></span>
</a>
<ul ng-show="isCollapsed" class="sub-nav">
<li>
<a href="#/vernerunde">
<i class="fa fa-th-list"></i>
Ny Vernerunde
</a>
</li>
<li>
<a href="#/interaksjon">
<i class="fa fa-gears"></i>
Ny Interaksjon
</a>
</li>
<li>
<a href="#/brukerstyring">
<i class="fa fa-user"></i>
Brukerstyring
</a>
</li>
</ul>
</li>
<li ng-controller="CollapseCtrl" class="dropdown">
<a ng-click="isCollapsed = !isCollapsed" href="javascript:;">
<i class="fa fa-search"></i>
Lister
<span class="caret"></span>
</a>
<ul ng-show="isCollapsed" class="sub-nav">
<li>
<a href="#/list">
<i class="fa fa-desktop"></i>
Alle
</a>
</li>
</ul>
</li>
</ul>
</nav>
And this is the controller responsible for the isCollapsed model:
controllers.controller('CollapseCtrl', function ($scope) {
$scope.isCollapsed = false;
});
I've also made a small gif which I'm going to throw in that shows my actual problem. Now, I'm not too sure whether or not it's present in the gif, but it seems if I click the first element in the list, it works. Then when that first element has been toggled, and I click the element underneath, it totally breaks apart.
EDIT1:
Okay, I changed the directive from ng-show="" to collapse="", still using "isCollapsed". Now it's working, but the height of the box that's collapsed is too small.

Answer 1

Though I don't have much insight into the problem I strongly suspect that the issue is in here:
<a ng-click="isCollapsed = !isCollapsed" href="javascript:;">
<i class="fa fa-wrench"></i>
Verktøy
<span class="caret"></span>
</a>
Mind that the ng-click is executed once , but once a variable changes, the scope lifecycle will recalculate the scope several times. And once a variable which depends on isCollapsed will change, the scope is re-calculated again, and so forth. This might explain the unusual openings and closings of the title panes. Although I don't see exactly why isCollapse is recalculated.
Solution: Move it as a method inside the controller.