Create a div tag in html file with specific id for example listArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:
HTML file:
<div id="listArea" ng-init="init()">
<div id="list1">
<div ng-repeat="item in mainlistItem">
<button type="button" class="btn btn-primary btn-block" ng-click="loadSubMenuPage($index)">{ {item.title} }</button>
</div>
</div>
<div id="list2">
<div ng-repeat="subitem in subMenuListItem">
<button type="button" class="btn btn-primary btn-block" ng-click="loadSubSubMenuPage($index)">{ {subitem.title} }</button>
</div>
</div>
<div id="list3">
<div ng-repeat="subsubitem in subsubMenuListItem">
<button type="button" class="btn btn-primary btn-block">{ {subsubitem.title} }</button>
</div>
</div>
</div>
Javascript file:
var data ={"id": "113","title": "Movies","subMenu": [{"title":"Sci-fi","subsubMenu":[{"title":"Intersteller"},{"title":"Inception"},{"title":"The Arrival"},
{"title":"The Paycheck"}]}};
$scope.init = function() {
$scope.mainlistItem = data;
}
$scope.loadSubMenuPage = function(index) {
$log.info($scope.mainlistItem);
$scope.subMenuListItem = $scope.mainlistItem[index].subMenu;
$scope.subsubMenuListItem = [];
}
$scope.loadSubSubMenuPage = function(index) {
$log.info($scope.subMenuListItem);
console.log("index: "+index);
$scope.subsubMenuListItem = $scope.subMenuListItem[index].subsubMenu;
}