Submenu doesn´t show/hide on my ng-click($index) - angularjs

Question

I'm trying to do a tree menu on my site.
I want the subitems to show/hide when I click the parent.
This solution don't work. Even tho it changes the item.active value to false/true. Any ides my friends?
Here is my HTML:
<div id="sidebar-wrapper">
<div class="cssTreeMenu tree">
<ul class="sidebar-nav">
<li ng-repeat="item in items" >
<a ui-sref="{{item.sref}}" ui-sref-active="active" ng-click="testcolaps($index)">{{item.name}}</a>
<ul ng-show="{{item.active}}" class="navbarColorOnClick">
<li ng-repeat="subItem in item.subItems" ui-sref-active="active">
<a ui-sref="{{subItem.sref}}">{{subItem.name}}</a>
</li>
</ul>
</li>
</ul>
</div>
Here is my controller:
$scope.testcolaps = function (index) {
$scope.items[index].active = !$scope.items[index].active;
};
$scope.items = [
{
name: "Test",
sref: "kpi.test",
active: false,
subItems: [
{
name: "Selectable KPI menu",
sref: "kpi.selectableKpiMenu"
},
{
name: "Test",
sref: "kpi.test"
}
]
},
{
name: "Test2",
sref: "kpi.test",
active: false,
subItems: [
{
name: "Selectable KPI menu 2",
sref: "kpi"
},
{
name: "Test 2",
sref: "internal"
}
]
},
];
As you can se my items have a active: property who I change to true/false. But still nothing happens in my menu. If I hard-code it to true it is showing like it should but still the click-event doesn't work.

Answer 1

The expression inside the ng-show need an expression without {{}} interpolation. Basically you need to remove {{}}.
ng-show="item.active"