javascript - ng-repeat ディレクティブ内のモーダルはクラッシュを引き起こします

Question

モーダルを開くボタンをテーブルの中に入れようとしています。しかし、どのボタンをクリックしても、何度も開こうとしているようです。メインコントローラー内に openModal と closeModal を配置しました。問題は、ng-repeat 内で使用しているためだと思いますか? しかし、いずれにせよ、何が問題なのかわかりません。私は何を間違っていますか？私はこのモーダルを使用しています：

http://angular-ui.github.io/bootstrap/#/modal

HTMLコード：

<div class="row">
    <div class="span4" ng-repeat="court in courts"> 
      <table class="table table-condensed table-bordered table-hover">
        <caption><h4>court {{court.records[0].id}}<h4></caption>
        <tr>
          <th style='text-align:center'>Hour</th>
          <th style='text-align:center'>Player 1</th>
          <th style='text-align:center'>Player 2</th>
          <th></th>
        </tr>
        <tr ng-repeat="record in court.records">
          <td width="50" >{{record.hour}}</td>
          <td ng-style="user1Payed(record)" style='text-align:center'>{{record.u1_first}} {{record.u1_last}}</td>
          <td ng-style="user2Payed(record)" style='text-align:center'>{{record.u2_first}} {{record.u2_last}}</td>
          <td> <!-- options button -->
            <button class="btn" ng-click="openModal()">Open me!</button>
            <div modal="shouldBeOpen" close="closeModal()" options="opts">
                <div class="modal-header">
                    <h3>I'm a modal!</h3>
                </div>
                <div class="modal-body">
                    <ul>
                        <li ng-repeat="item in items">{{item}}</li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-warning cancel" ng-click="closeModal()">Cancel</button>
                </div>
            </div>
          </td> <!-- options button end -->
        </tr> 
      </table>
    </div>
</div>

そしてコントローラーコード：

function CourtsController($scope, $window, $http, CourtsService, $timeout) { 
  $scope.openModal = function () {
    $scope.shouldBeOpen = true;
  };

  $scope.closeModal = function () {
    $scope.closeMsg = 'I was closed at: ' + new Date();
    $scope.shouldBeOpen = false;
  };

 $scope.items = [
            "Guest Payment",
            "Member Payment",
            "League (no payment)",
            "no Payment"
          ];

  $scope.opts = {
    backdropFade: true,
    dialogFade:true
  };

Answer 1

のモーダル div を移動し、ng-repeat$scope 変数を設定しますopenModal()。