Ng-repeat does not work in bootstrap modal

Question

I use ng-repeat to display different content (i.e. elements in an array) in different modal bootstraps, however, something strange happens in this example .

I include 'modal' in ng-repeat as follows:

 <div ng-repeat="item in items"> <button type="button" class="btn btn-info" data-toggle="modal" data-target="#example"> {{item}} </button> <div class="modal" id="example"> <div class="modal-content"> {{item}} </div> </div> </div> 

Thus, the expected result should consist of three buttons with three different contents (for example, <button> 'hi' should have hi content, hello has hello content), however, as you see in the example, all three buttons have the same button associated with them content

Any suggestions or comments are appreciated.

Answer 1

You are targeting the same identifier.

Change to this:

 <button type="button" class="btn btn-info" data-toggle="modal" data-target="#example{{$index}}"> {{item}} </button> <div class="modal" id="example{{$index}}"> <div class="modal-content"> {{item}} </div> </div> 

Updated plucker

Answer 2

You can do this in several ways. One could add a select function via ng-click , and then install a new model. Installing this new model allows you to remove the modal template from ng-repeat , while keeping your markup change thin and manageable (this can become huge with lots of objects! - no need to repeat this <div> , be it three or three hundred times). Check out the following example ...

 <div ng-repeat="item in items"> <button type="button" class="btn btn-info" data-toggle="modal" data-target="#example" ng-click="select(item)">{{ item }}</button> </div> <div class="modal" id="example"> <div class="modal-content"> {{ selected }} </div> </div> 

---

 myApp.controller('Ctrl', function($scope) { $scope.items = ['hi', 'hey', 'hello']; $scope.select = function(selected) { $scope.selected = selected } }); 

Plunker Link - Updated Demo

Answer 3

It works if you add dynamic identifiers to your modules, for example:

  <div ng-repeat="item in items"> <button type="button" class="btn btn-info" data-toggle="modal" data-target="#{{item}}"> {{item}} </button> <div class="modal" id="{{item}}"> <div class="modal-content"> {{item}} </div> </div> </div>