angularjs - Angular Easy Q - Getting data to update inside of my bootstrap modal when ng-repeat item is clicked -

angularjs - Angular Easy Q - Getting data to update inside of my bootstrap modal when ng-repeat item is clicked -

this code repeating json info in li accurately, when open modal of info based off of first indexed element, no matter tag in ng-repeat clicked. problem may have making sure within of modal info based off of own ng-repeat li, cannot figure out how this. perhaps controller doing $parent.box flummoxed.

<div> <li class="boxes repeat-item" ng-repeat="box in boxes | filter:query | filter:filtercriteria | orderby:orderprop | startfrom: currentpage * pagesize | limitto:pagesize | filter:filterexpr"> <div class="col-xs-12 col-sm-6 col-md-4 work"> <a data-toggle="modal" data-target="#mymodal"> <img src="{{box.imageurl}}"></a> <h4>{{box.name}} <p class="pull-right">{{box.completion}}</p> </h4> </div> <div class="modal fade" id="mymodal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times fa-lg"></i></a> <h4 class="modal-title text-center">{{box.name}}</h4> </div> <div class="modal-body text-center"> <img src="{{box.imageurl}}"><br> </div> <div class="details"> height: {{box.height}}<br> type: {{box.type}} {{box.units}}<br> opening: {{box.completion}}<br> {{box.snippet}} </div> </div> </div> </div> </li>

you have multiple elements id of mymodal. don't that. can create unique ids based off of property of box. example, id="mymodal{{box.name}}" (if name unqiue). sure set data-target same scheme.

angularjs twitter-bootstrap