Angular Master details

by tridip

HTML

<div ng-app="myApp">
    <ul class="nav nav-pills" data-ng-controller= "MasterDetails" >
        <li
            data-ng-repeat="parent in details | filter: { ParentID: 0 }" >
            <a href="#/customers"> {{ parent.Name }} </a>
            <ul>
                <li data-ng-repeat="child in details | filter: { ParentID: parent.ID }">
                    {{ child.Name }}
                </li>
            </ul>
        </li>
    </ul>
</div>

JavaScript

angular.module("myApp", []).
controller("MasterDetails", ['$scope', function($scope) {
	$scope.details = [{"ID":1,"Name":"Suzy","ParentID":0},
{"ID":2,"Name":"Somi","ParentID":1},
{"ID":3,"Name":"Romi","ParentID":2},
{"ID":4,"Name":"Jumi","ParentID":3},
{"ID":5,"Name":"Gargi","ParentID":0},
{"ID":6,"Name":"Sujoy","ParentID":5},
{"ID":7,"Name":"Kamal","ParentID":6},
{"ID":8,"Name":"Joy","ParentID":0},
{"ID":9,"Name":"Sumana","ParentID":8},
{"ID":10,"Name":"Alex","ParentID":0}];
  
  
}]);