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

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"