javascript - how to show dynamically nested child array object of an object while nested level is not restricted -

i have array of object each object have children property object, object have children property object include children property object , on ............

some object have children , don't have children (i.e children: array[0]) want display them dynamically on single page using dynamic routes. example first show object list if object have child child see on same page using different route on button click (i.e., ng-click)

how possible array of object [object, object, object] hierarchy example more clarification

0: object 1: object        children: array[3]            1: object            2: object  2: object         children: array[3]            1: object                    children: array[3]                             1: object                              2: object                             3: object 3: object 4: object 

parent id given in each object.

you can use angular ui tree directive.

https://jimliu.github.io/angular-ui-tree/

if want create custom directive, can use recursive templating in ng-repeat.

something this

<script type="text/ng-template" id="children_renderer.html"> {{data.label}}     <ul>         <li ng-repeat="children in data.childrens" ng-include="'children_renderer.html'"></li>     </ul> </script>  <ul ng-controller="nestedformctrl">     <li ng-repeat="child in childdata" ng-include="'children_renderer.html'"></li> </ul>