angularjs ng-repeat is not looping through the modal box

Question

Hi everybody so I am building this assignment for a class, and I have reached a wall. The ng-repeat is not looping through the modal box. It loops through the first item but then stops. Any help? Here is a jsbin to illustrate.

http://jsbin.com/OZaGipAg/2/edit

Thank you everyone.

Answer 1

Looking at the source with Firebug, your code looks to be doing what its supposed to be doing. Each list item has a unique picture for the thumbnail and for the modal window in the html. This is not a looping issue. The problem is that all of the thumbnails are loading the same modal window (first one).

Update
I was able to get your thumbnails to load the appropriate image by tying the id generated for each modal window to the $index of the ng-repeat. Look at the following lines:

<div class="modal fade" id="myModal{{$index}}">

<a href='#' data-toggle="modal" data-target="#myModal{{$index}}" >

These two lines are the only place that you used the id. Change lines 24 and 44 to match.