title: How to remove deleted row in ng-table
body: <p>I have a grid developed using <a href="http://ngmodules.org/modules/ng-table" rel="nofollow">ng-table</a> and I need to remove selected item from grid table after removing from server-side. Already tried to call the grid loading ajax again, but it's not working.</p>
  
  <p><em><strong>My Controller</em></strong>,</p>
  
  <pre><code>app.controller('blockController', function($scope, $filter, $q, ngTableParams, $sce, Block) {
  
      // Fetch data from server using RESTful API
      $scope.load = function() {
          // load serverside data using http resource service
          Block.get({}, function (response) { // success
                  $scope.results = response.data;
                      var data = response.data; // store result to variable
  
                      // Start ng-table with pagination
                  $scope.tableParams = new ngTableParams({
                                  page: 1,            // show first page
                                  count: 10           // count per page
                  }, {
                                  total: data.length, // length of data
                                  getData: function($defer, params) {
                                          // use build-in angular filter
                                          var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
                                          orderedData = params.filter() ? $filter('filter')(orderedData, params.filter()) : orderedData;
                                          params.total(orderedData.length); // set total for recalc pagination
                                          $defer.resolve($scope.blocks = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                                  }
                      });
  
                  // un-check all check boxes
                  $scope.checkboxes = { 'checked': false, items: {} };
  
                  // watch for check all checkbox
                  $scope.$watch('checkboxes.checked', function(value) {
                      angular.forEach($scope.blocks, function(item) {
                          if (angular.isDefined(item.id)) {
                              $scope.checkboxes.items[item.id] = value;
                          }
                      });
                  });
  
                  // watch for data checkboxes
                  $scope.$watch('checkboxes.items', function(values) {
                      if (!$scope.blocks) {
                          return;
                      }
                      var checked = 0, unchecked = 0,
                      total = $scope.blocks.length;
                      angular.forEach($scope.blocks, function(item) {
                          checked   +=  ($scope.checkboxes.items[item.id]) || 0;
                          unchecked += (!$scope.checkboxes.items[item.id]) || 0;
                      });
                      if ((unchecked == 0) || (checked == 0)) {
                          $scope.checkboxes.checked = (checked == total);
                      }
                      // grayed checkbox
                      angular.element(document.getElementById("select_all")).prop("indeterminate", (checked != 0 &amp;&amp; unchecked != 0));
                  }, true);
  
                  }, function (error) { // error
                      $scope.results = [];
                      // error message display here
                  });
      }
  
      // Call REST API
      $scope.load();
  
      /*
      |------------------------------
      | Delete selected items
      |------------------------------
      */
  
      $scope.delete = function() {
  
          var items = [];
          // loop through all checkboxes
          angular.forEach($scope.blocks, function(item, key) {
              if($scope.checkboxes.items[item.id]) {
                  items.push(item.id); // push checked items to array
              }  
          });
          // if at least one item checked
          if(items.length &gt; 0) {
              // confirm delete
              bootbox.confirm("Are you sure to delete this data?", function(result) {
                          if(result==true) {
                              for (var i = 0; i &lt; items.length; i++) {
                                  // delete using $http resopurce
                                  Block.delete({id: items[i]}, function (response) { // success
                                      // remove the deleted item from grid here
                                      // show message
                          }, function (error) { // error
                                  // error message display here
                              });
                              }
                          }
                      }); 
          }
      }; // delete
  
  }); // end controller
  </code></pre>
  
  <p><em><strong>HTML Table,</em></strong></p>
  
  <pre><code>            &lt;!-- data table grid --&gt;
              &lt;table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" ng-table="tableParams" show-filter="true"&gt;
                  &lt;tbody&gt;
                          &lt;tr ng-repeat="block in $data"&gt;
                      &lt;!-- serial number --&gt;
                      &lt;td data-title="'&lt;?php echo $this-&gt;lang-&gt;line('sno'); ?&gt;'" style="text-align:center" width="4"&gt;{{$index+1}}&lt;/td&gt;
                      &lt;!-- Checkbox --&gt;
                      &lt;td data-title="''"  class="center" header="'ng-table/headers/checkbox.html'" width="4"&gt;
                         &lt;input type="checkbox" ng-model="checkboxes.items[block.id]" /&gt;
                      &lt;/td&gt;
                      &lt;!-- Block Name --&gt;
                      &lt;td data-title="'&lt;?php echo $this-&gt;lang-&gt;line('label_cluster_name'); ?&gt;'" sortable="'block_name'" filter="{ 'block_name': 'text' }"&gt;
                          &lt;span ng-if="!block.$edit"&gt;{{block.block_name}}&lt;/span&gt;
                          &lt;div ng-if="block.$edit"&gt;&lt;input class="form-control" type="text" ng-model="block.block_name" /&gt;&lt;/div&gt;
                      &lt;/td&gt;
                      &lt;!-- Description --&gt;
                      &lt;td data-title="'&lt;?php echo $this-&gt;lang-&gt;line('label_description'); ?&gt;'" sortable="'description'" &gt;
                          &lt;span ng-if="!block.$edit"&gt;{{block.description}}&lt;/span&gt;
                          &lt;div ng-if="block.$edit"&gt;&lt;textarea class="form-control" ng-model="block.description"&gt;&lt;/textarea&gt;&lt;/div&gt;
                      &lt;/td&gt;
                      &lt;!-- Edit / Save button --&gt;
                      &lt;td data-title="'&lt;?php echo $this-&gt;lang-&gt;line('label_actions'); ?&gt;'" width="6" style="text-align:center"&gt;
                          &lt;a ng-if="!block.$edit" href="" class="btn btn-inverse btn-sm" ng-click="block.$edit = true"&gt;&lt;?php echo $this-&gt;lang-&gt;line('label_edit'); ?&gt;&lt;/a&gt;
                          &lt;a ng-if="block.$edit" href="" class="btn btn-green btn-sm" ng-click="block.$edit = false;update(block)"&gt;&lt;?php echo $this-&gt;lang-&gt;line('label_save'); ?&gt;&lt;/a&gt;
                      &lt;/td&gt;
                          &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt; &lt;!-- table grid --&gt;
  </code></pre>