Angular: Empty Fiddle

http://angularjs.org/

by Sajeetharan Sinnathurai

HTML

<div ng-controller="MyCtrl">
    <ul>
        <li   >
            <span ng-click="showChilds(items[0])">{{items[0].name}}</span>
            <ul>
                <li ng-repeat="subItem in items[0].subItems" ng-show="items[0].active">
                    <span>---{{subItem.name}}</span>
                </li>
            </ul>
        </li>
       <li   >
            <span ng-click="showChilds(items[1])">{{items[1].name}}</span>
            <ul>
                <li ng-repeat="subItem in items[1].subItems" ng-show="items[1].active">
                    <span>---{{subItem.name}}</span>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

li:hover{
    cursor: pointer;
}

JavaScript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {    
    $scope.showChilds = function(item){
    debugger;
        item.active = !item.active;
    };
    
    $scope.items = [
        {
            name: "Item1",
            subItems: [
                {name: "SubItem1"},
                {name: "SubItem2"}
            ]
        },
        {
            name: "Item2",
            subItems: [
                {name: "SubItem3"},
                {name: "SubItem4"},
                {name: "SubItem5"}
            ]
        },
        {
            name: "Item3",
            subItems: [
                {name: "SubItem6"}
            ]
        }
    ];
};