ng-repeat does not work in bootstrap modal

Question

I am using ng-repeat to show different contents (i.e, items in an array) in different bootstrap modal, however something weird happens in this example.

I include the 'modal' in the ng-repeat like this:

<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>

So the expected result should be three buttons with three different contents (like the <button> 'hi' should have content hi, hello has content hello), however as you see in the example, all three buttons have the same associated modal content.

Any suggestions or comments are appreciated.

Answer 1

You are targeting the same ID.

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

It works if you add dynamic ids to your modals, 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>