angular ui bootstrap modal is not working properly with ng repeat

Question

hey guys i was trying to assign each modal to each item i have but it doesn't seem to work like what i expected.

i was expect it will only trigger one modal in a time, not all together.

for example i have 3 items here, each item has its delete button and every button can trigger a modalbox.

however i click any delete button it will trigger all modalbox like this

this is the code i have so far

html(the modal view)

<script type="text/ng-template" id="myModalContent.html">
// ng-repeat to display the "title" in modalbox
<div ng-repeat='data in modalData'>
        <div class="modal-body">
            <p class="text-center"> Are you sure you want to <span class="maroon">delete</span><br/>
            " <b>{{data.channelTitle}}</b> " <br/> 
            this channel and tag <b>permanently</b> ?</p>
            <p class="text-center">This action <b>CANNOT</b> be undone.</p>
            <br/>
            <br/>
        <form  class="pure-form pure-form-aligned text-center">
            <p class="text-center red pure-splash-subhead" ng-if="errorMessage">{{errorMessage}}</p>
        <b>Please type in the title of the post to confirm.</b><br/>
        <br/>
            <input required ng-model="titleform"  type="text" placeholder="{{data.title}}">
            <br/>

<input type='submit' ng-click="confirm(titleform)" value="I understand the consequences, delete this post"class="pure-button pure-button-error">

        </form>
        </div>
        <div class="modal-footer">
            <b> <a href="" ng-click="cancel()">Cancel</a></b>
        </div>
</div>
   </script>

controller

$http.post('/channelHandler/getChannelByUser',data).
      success(function(channelData) {
        $scope.channels = channelData;
       $scope.open = function () {
                $scope.items = channelData;
                var modalInstance = $modal.open({
                  templateUrl: 'myModalContent.html',
                  controller: ModalInstanceCtrl,
                   resolve: {
                    items: function () {
                    return $scope.items;
                  }
              }
                });
              }
        })
    })

modalInstanceCrtl

var ModalInstanceCtrl = function ($scope, $modalInstance,items) {
                  $scope.modalData = items;
                  $scope.cancel = function () {
                    $modalInstance.dismiss('cancel');
                  };
                  $scope.confirm = function(titleform){
                    if(titleform === items.title){
                        $http.delete('/contentHandler/post/'+$routeParams.permalink+'/delete').
                        success(function(data){
                          $location.path('/');
                        }).error(function(err){
                          alert(err);
                           $scope.errorMessage = err;
                        });
                    $modalInstance.dismiss('cancel');
                    }else{
                      $scope.errorMessage = "Please enter the correct title "
                    }

                  }

                };

may i know is it the correct approach to do this ?

Answer 1

Some information is missing but probably it should look something like this:

html(the modal view)

<script type="text/ng-template" id="myModalContent.html">    
  <div class="modal-body">
    <p class="text-center"> Are you sure you want to <span class="maroon">delete</span><br/>
            " <b>{{data.channelTitle}}</b> " <br/> 
            this channel and tag <b>permanently</b> ?</p>
    <p class="text-center">This action <b>CANNOT</b> be undone.</p>
    <br/>
    <br/>
    <form  class="pure-form pure-form-aligned text-center">
      <p class="text-center red pure-splash-subhead" ng-if="errorMessage">{{errorMessage}}</p>
      <b>Please type in the title of the post to confirm.</b><br/>
      <br/>
      <input required ng-model="titleform"  type="text" placeholder="{{data.title}}">
      <br/>
      <input type='submit' ng-click="confirm(titleform)" value="I understand the consequences, delete this post"class="pure-button pure-button-error">
    </form>
  </div>
  <div class="modal-footer">
    <b> <a href="" ng-click="cancel()">Cancel</a></b>
  </div>
</script>

controller

$http.post('/channelHandler/getChannelByUser',data).
  success(function(channelData) {
    $scope.channels = channelData;

    $scope.delete = function ( currentChannel ) {                    
      var modalInstance = $modal.open({
        templateUrl: 'myModalContent.html',
        controller: ModalInstanceCtrl,
        resolve: {
          item: function () {
            return currentChannel;
          }
        }
      });
    }
  });

The delete button need something like ng-click="delete( data )". In which data is a single channel.

modalInstanceCrtl

var ModalInstanceCtrl = function ($scope, $modalInstance, item) {

  $scope.data = item;

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
  $scope.confirm = function(titleform){
    if (titleform === items.title) {
      $http.delete('/contentHandler/post/'+$routeParams.permalink+'/delete').
         success(function(data){
           $location.path('/');
         }).error(function(err){
           alert(err);
           $scope.errorMessage = err;
         });
      $modalInstance.dismiss('cancel');
    }else{
      $scope.errorMessage = "Please enter the correct title "
    }
  }
};