Access nested arrays using ng-repeat in angularjs

Question

Jsfiddle

I cannot access images of an array in a nested collection. Why can't I see a way out?

Model:

var obj = [{ "id": "7", "date": "1 Jan", "images": ["507f42c682882", "507e24b47ffdb", "507e2aeca02d5", "507e2b19663a9"] }, { "id": "7", "date": "1 Jan", "images": ["507f42c682882", "507e24b47ffdb", "507e2aeca02d5", "507e2b19663a9"] }]; 

This is HTMl with ng-repeat:

 <ul> <li ng-repeat="img in item"> <br /> <li ng-repeat="img1 in img.images">{{img1}}</li> </li> </ul> 

Can someone point me to what I am missing?

Answer 1

The problem is that you are trying to repeat the list of li elements inside the li element, which is invalid HTML. Thus, angular will not display this.

Update your HTML to:

 <ul> <li ng-repeat="img in item"> <ul> <li ng-repeat="img1 in img.images">{{img1}}</li> </ul> </li> </ul>