How to reload angularJs ng-table

Question

I have an ng-table. I have multiple ng-tables inside one controller. I am giving dynamic attributes i.e. ng-table="tableParams2" or ng-table="tableParams3" etc. to them. I am making an ajax request on button click function to update the data. My http request is being sent at backend. By after I click 3-4 times, I see in console my table is reloaded. By after data, my data remains constant, I don't see the reloaded content in table. Below is my code:

Html:

<button ng-click="qualifyX(2)" ></button>  <div class="dragable modal hide fade ui-draggable in" id="ptn_popup" aria-hidden="false" data-backdrop="false"> <div class="modal-header">     <a class="close" data-dismiss="modal" data-original-title="" title="">×</a>     <h4>Possible matched Companies</h4> </div> <div class="modal-body" style="padding: 10px;">     <div id="ptn_qualify_res" class="grid-view">         <div class="summary"></div>         <table ng-table="tableParams2" show-filter="true" class="items table table-striped table-bordered table-condensed">             <tr ng-repeat="business in $data">                 <td data-title="'Primary Trading Name'" sortable="'primary_trading_name'" filter="{ 'primary_trading_name': 'text' }">                     {{business.primary_trading_name}}                 </td>                 <td data-title="'Primary Entity Name'" sortable="'primary_entity_name'" filter="{ 'primary_entity_name': 'text' }">                     {{business.primary_entity_name}}                 </td>                 <td data-title="'Business Name(s)'" sortable="'business_names'" filter="{ 'business_names': 'text' }">                     {{business.business_names}}                 </td>                 <td data-title="'Other Trading Name(s)'" sortable="'other_trading_names'" filter="{ 'other_trading_names': 'text' }">                     {{business.other_trading_names}}                 </td>                 <td data-title="'State'" sortable="'state'" filter="{ 'state': 'text' }">                     {{business.state}}                 </td>                 <td style="width:70px;">                     <a data-dismiss="modal" href="javascript:void(0)" data={{business.business_id}} class="ptn_qualify_view_link">                         <button type="button" class="btn btn-mini"><i class="icon-eye-open"></i> View &nbsp;</button>                     </a>                 </td>             </tr>         </table>     </div> </div> <div class="modal-footer">     <a data-dismiss="modal" class="btn" id="yw11" href="javascript:void(0);" data-original-title="" title="">Close</a> </div> </div> 

App.js

$scope.qualifyX = function(busID) {     var penModal = $('#popups_container' + busID + ' #pen_popup');     var pen = $('#popups_container' + busID).next().find('input#Custombusiness_primary_entity_name').val();     var selectors = {pen: pen, penModal: penModal};     $http.get(getPtnData + '?ptn=' + selectors.ptn).success(function(data) {         selectors.ptnModal.find('#ptn_qualify_res').removeClass('grid-view-loading').addClass('grid-view');         $scope['tableParams' + busID] = new ngTableParams(                 {                     page: 1, // show first page                     count: data.length, // count per page                     sorting:                             {                                 primary_trading_name: 'asc'     // initial sorting                             }                 }, {             total: 0, // length of data             getData: function($defer, params) {                 var filteredData = params.filter() ?                         $filter('filter')(data, params.filter()) :                         data;                 var orderedData = params.sorting() ?                         $filter('orderBy')(filteredData, params.orderBy()) :                         data;                  params.total(orderedData.length); // set total for recalc pagination                 $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));             }         });      }); }; 

Create a somewhat similar Plunker, on every click I want to reload the table with new data.

Answer 1

I was having a very similar problem where my table was rendering but not reloading upon an action. What you need to do is to reload $scope.tableParams every time your button is clicked. A simple way to do this is to wrap $scope.tableParams.reload() in a function, and then call that function when the button is clicked.

controller code:

$scope.doSearch = function () {     $scope.tableParams.reload(); } 

html code:

<button ng-click="doSearch()">Search</button>