How do I render tree structure data by using directive's template - angularjs

Question

Have anyone tried to render tree structure data by using directive?
What I wanted to do is rendering the data like...
{
name: "root",
next: null,
child: {
name : "1"
next : {
name : "2",
next : {
name: "3",
next: null,
child: null
},
child: {
name: "2-1",
next: null,
child: null
}
},
child: {
name: "1-1",
next: {
name: "1-2",
next: null,
child: null
},
child: null
}
}
}
to HTML data like
<ul>
<li> root
<ul>
<li> 1
<ul>
<li> 1-1 </li>
<li> 1-2 </li>
</ul>
</li>
<l1> 2
<ul>
<li> 2-1 </li>
</ul>
</li>
<li> 3 </li>
</ul>
</li>
</ul>
I know if data is an array, I can use "ng-repeat" for template,
and also if data is an object I know the structure, I can use "{{ }}" tag.
But I don't have any idea for treating object data will change dynamically.
That means I also want to add some child to the data as one object in $scope,
and render it synchronously using angular.js .
Does anyone have a great idea or the experience you did it?

Answer 1

angularjs
<div ng-init="friends = [
{name:'John', age:25, gender:'boy'},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Patrick', age:40, gender:'boy'},
{name:'Samantha', age:60, gender:'girl'}
]">
<ul class="example-animate-container">
<li class="animate-repeat" ng-repeat="friend in friends | filter:q">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
</ul>
</div>
result
[1] John who is 25 years old.
[2] Jessie who is 30 years old.
[3] Johanna who is 28 years old.
[4] Joy who is 15 years old.
[5] Mary who is 28 years old.
[6] Peter who is 95 years old.
[7] Sebastian who is 50 years old.
[8] Erika who is 27 years old.
[9] Patrick who is 40 years old.
[10] Samantha who is 60 years old.