How to use modal Bootstrap in angular ng-repeat? - angularjs

Question

I have a table in Angular that gets list of names. I want to be able to delete a name when the user click on the button in front of the name. However, before that, I want to show a modal and ask the user to confirm that.
<table class="table table-condensed table-striped">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="c in vm.entity | filter:vm.filter track by c.Id">
<td>
<span>{{c.Name}}</span>
</td>
<td>
<button class="glyphicon glyphicon-trash" type="button" data-toggle="modal" data-target=".bs-example-modal-sm"></button>
</td>
</tr>
</tbody>
</table>
I am using Bootstap modal and here is what I have.
<div class="modal fade bs-example-modal-sm">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"></span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Are you sure?</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this Item?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" data-ng-click="vm.remove(c)" data-dismiss="modal" class="btn btn-primary">Yes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
The problem is since the buttons in the modal are not in the loop I can't pass in the correct object into the vm.remove method to delete the item.
Does anyone know how to deal with this issue?

Answer 1

Ok Guys,
Thanks for all your help.
I have managed to fix it by moving the modal right next to the button so the modal is repeated as well as the button as #Dabbiemiller suggested and then I assign a ID for each modal that matches the id of each element, and I assign the data-target= "modal{{c.id}}" and it works :)
Also I have changed to becase the fade class was causing an issue as well.
<button class="glyphicon glyphicon-trash" ng-show="vm.isAdmin == 'True'" type="button" data-toggle="modal" data-target="#modal{{c.id}}"></button>
<div class="modal" id="modal{{c.id}}">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"></span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Are you sure?</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this Item?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" data-ng-click="vm.remove(c)" data-dismiss="modal" class="btn btn-primary">Yes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->