How can i display nested list in angular js - angularjs

Question

I have this html code for student records and its working good
<li ng:repeat="student in students">
<a href='#/student/{{ student.id }}'>{{ student.number }}</a>
</li>
But i have few few more nested levels of details which i want to show like this
<ul>
<li ng:repeat="student in students">
<a href='#/student/{{ student.id }}'>{{ student.number }}</a>
if {{ student.subjects}} > 0
//some indenting
<ul>
<li ng:repeat="subject in subjects">
<a href='#/student/subject/{{ subject.id }}'>{{ subject.name }}</a>
if {{ subjects.assignments}} > 0
<ul>
<li ng:repeat="subject in subjects">
<a href='#/student/subject/assignment/{{ assignment.id }}'>{{ assignment.name }}</a>
<li>
</ul>
<li>
</ul>
</li>
</ul>
But i don't know the angular syntax , how can i do that

Answer 1

You can use ng-show on child UL elements, and iterate each level in its own ng-repeat. Note: You don't need things like if {{ student.subjects}} > 0 (That's not a valid JS code btw). ngRepeat won't iterate if collection is empty:
<ul>
<li ng-repeat="student in students">
<a href='#/student/{{ student.id }}'>{{ student.number }}</a>
<ul ng-show="student.subjects && student.subjects.length">
<li ng-repeat="subject in student.subjects">
<a href='#/student/subject/{{ subject.id }}'>{{ subject.name }}</a>
<ul ng-show="subject.assignments && subject.assignments.length">
<li ng-repeat="assignment in subject.assignments">
<a href='#/student/subject/assignment/{{ assignment.id }}'>{{ assignment.name }}</a>
<li>
</ul>
<li>
</ul>
</li>
</ul>