title: How to delete data inside the list using bootstrap modal?
body: <p>I just want to delete the data inside the table using bootstrap modal, but it seems so hard to find the right way how to do this, here's my sample code. Inside my modal I have an href code that use to delete the data
  , it is working outside the modal. I just want to know any solution make this working. thanks.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', ['ui.bootstrap']);
  
  var student = [{
    name: 'Andrew'
  }, {
    name: 'Butler'
  }, {
    name: 'Cameron'
  }, {
    name: 'Delo'
  }, {
    name: 'Emman'
  }, {
    name: 'Ferbs'
  }];
  
  app.filter('startFrom', function() {
    return function(input, start) {
      if (input) {
        start = +start; //parse to int
        return input.slice(start);
      }
      return [];
    }
  });
  
  app.controller('customersCtrl', function($scope, $timeout) {
  
    $scope.list = student;
    $scope.currentPage = 1; //current page
    $scope.entryLimit = 10; //max no of items to display in a page
    $scope.filteredItems = $scope.list.length; //Initially for no filter
    $scope.totalItems = $scope.list.length;
  
    $scope.setPage = function(pageNo) {
      $scope.currentPage = pageNo;
    };
  
    $scope.filter = function() {
      $timeout(function() {
        $scope.filteredItems = $scope.filtered.length;
      }, 10);
    };
  
  
    $scope.sort_by = function(predicate) {
      $scope.predicate = predicate;
      $scope.reverse = !$scope.reverse;
    };
  
  
  
  });
  
  app.filter('startsWithA', function() {
    return function(items, letter) {
      console.log(items, letter)
      var filtered = [];
      var letterMatch = new RegExp(letter, 'i');
      for (var i = 0; i &lt; items.length; i++) {
        var item = items[i];
        if (letterMatch.test(item.name.substring(0, 1))) {
          filtered.push(item);
        }
      }
      console.log(filtered);
      return filtered;
    };
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"&gt;&lt;/script&gt;
  &lt;div ng-app="app"&gt;
    &lt;div class="container" ng-controller="customersCtrl"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-12"&gt;
          &lt;h2 id="titleHead"&gt;&lt;center&gt;Student List&lt;/center&gt;&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="option-panel"&gt;
          &lt;div class="col-sm-3 col-md-3 pull-right"&gt;
            &lt;form class="navbar-form"&gt;
              &lt;div class="input-group"&gt;
                &lt;input type="text" ng-model="search" ng-click="filter()" placeholder="Search student" class="form-control" placeholder="Search" name="search"&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="nav navbar-default"&gt;
          &lt;div class="tab-panel"&gt;
            &lt;nav&gt;
              &lt;ul&gt;
                &lt;li class="active" name="active"&gt;&lt;a ng-click="letter = '[AB]'"&gt;A-B&lt;/a&gt; 
                &lt;/li&gt;
                &lt;li class="active" name="active"&gt;&lt;a ng-click="letter = '[CD]'"&gt;C-D&lt;/a&gt; 
                &lt;/li&gt;
                &lt;li class="active" name="active"&gt;&lt;a ng-click="letter = '[EF]'"&gt;E-F&lt;/a&gt; 
                &lt;/li&gt;
  
  
              &lt;/ul&gt;
            &lt;/nav&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="no-more-tables"&gt;
          &lt;table class="col-md-12 table-bordered table-condensed cf" ng-show="filteredItems &gt; 0"&gt;
            &lt;thead class="cf"&gt;
              &lt;tr&gt;
  
                &lt;th&gt;
                  &lt;center&gt;Name&amp;nbsp;
                    &lt;a ng-click="sort_by('first_name');"&gt;&lt;/a&gt;
                  &lt;/center&gt;
                &lt;/th&gt;
  
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody color="#"&gt;
              &lt;tr ng-repeat="data in filtered = (list | filter:search |orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit |startsWithA:letter |limitTo:entryLimit "&gt;
                &lt;td data-title="Name" class="text-center"&gt;{{data.name}}      &lt;a type="button" class="btn btn-xs btn-primary" style="width: 40%;" href="#"  data-toggle="modal" data-target="#myModal" &gt;Delete&lt;/a&gt;
   &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;div class="col-md-12" ng-show="filteredItems == 0"&gt;
            &lt;div class="col-md-12"&gt;
              &lt;center&gt;
                &lt;h4&gt;No results found&lt;/h4&gt;
              &lt;/center&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-12" ng-show="filteredItems &gt; 0"&gt;
            &lt;center&gt;
              &lt;div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="&amp;laquo;" next-text="&amp;raquo;"&gt;&lt;/div&gt;
            &lt;/center&gt;
          &lt;/div&gt;
          &lt;div id="myModal" class="modal fade"&gt;
        &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;
                &lt;div class="modal-header"&gt;
                    &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                    &lt;h4 class="modal-title"&gt;Delete Student&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div class="modal-body"&gt;
                    &lt;p&gt;Do you want to delete this student?&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="modal-footer"&gt;
                    &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;No&lt;/button&gt;
                    &lt;button type="button" class="btn btn-primary" href="&lt;?php echo base_url(); ?&gt;index.php/students/edit/studentform/{{data.id}}" &gt;Yes&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>