How to add Search using ngTable

Question

My current code is pulling data using JSON. I can see my data load correctly on ngTable.

How can I add a search box that upon clicking the button, initiates a search and reloads data on my ngTable? I have tried using tableParams.reload() within an ngClick but that doesn't reload my data.

Controller

app.controller('ModelPagingCtrl', function ($scope, ngTableParams, $filter, 
                $http, DataService) {
$scope.doSearch = function () {
    DataService.getModels($scope.SearchText).then(function (data) {
        console.log("GetModels Worked");
        $scope.data = data.d;      
        $scope.tableParams = new ngTableParams({
            page: 1,
            count: 10,
            filter: {
                ModelNum: ''
            },
            sorting:
            {
                ModelNum: 'asc'
            }
            }, {
            total: $scope.data.length, 
            getData: function ($defer, params) {
                // use built-in angular filter
                var filteredData = params.filter() ?
                            $filter('filter')($scope.data, params.filter()) 
                            : $scope.data;
                var orderedData = params.sorting() ?
                            $filter('orderBy')(filteredData, params.orderBy()) 
                            : $scope.data;
                params.total(orderedData.length);
                $defer.resolve(orderedData.slice((params.page() - 1) 
                    * params.count(), params.page() * params.count()));
            } 
        }, function (error) {
            console.log('errror', error);
        });
    });

Factory/DataService

app.factory('DataService', function ($http, $q) {
    return {
    getModels: function (Search) {
        return $http.post('AngularWithWebServices.aspx/FetchModels', 
                { "search":  Search }).then(function (response) {
                      if (typeof response.data === 'object') {
                           console.log('object found');  
                          return response.data;
                      } else {
                          // invalid response
                          console.log("Invalid Response");
                          return $q.reject(response.data);
                      }
                  }, function (response) {
                      // something went wrong
                      console.log("Error Response!");
                      return $q.reject(response.data);
                  });
    }
};
});

HTML

 Search: <input ng-model="SearchText"/>
          <button ng-click="doSearch()">Search</button>**<----What goes here?**           
        <table class="table" ng-table="tableParams" show-filter="true" >
          <tr ng-repeat="item in $data" >
            <td data-title="'ModelNum'" sortable="'ModelNum'" 
               filter="{ 'ModelNum': 'text' }">
               {{item.ModelNum}}               
            </td>
             <td>
              <strong>Year:</strong><p>{{item.Year}}</p>
              <strong>Price:</strong><p>{{item.Price}}</p>
              <p>{{item.Features}}</p>
             </td>
          </tr>
        </table>

Answer 1

I didn't test this code but it should work for you.

app.controller('ModelPagingCtrl', function ($scope, ngTableParams, $filter, $http, DataService) {

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

    function search(params)
    {
        return DataService.getModels($scope.SearchText);   
    }

    $scope.tableParams = new ngTableParams({
        page: 1,
        count: 10,
        filter: {
            ModelNum: ''
        },
        sorting:
        {
            ModelNum: 'asc'
        }
        }, {
        getData: function ($defer, params) {
            //pass params.url() to your search function http://whatever.dev?count=10&page=1&sorting%5Bid%5D=desc
            search(params.url()).then(function(data)
            {
                //you have 2 ways from here

                // 1. if you use server side sorting, filtering
                params.total(data.length);
                $defer.resolve(data);

                // 2. if you use client side sorting/filtering    
                var filteredData = params.filter() ?
                            $filter('filter')(data, params.filter()) 
                            : data;
                var orderedData = params.sorting() ?
                            $filter('orderBy')(filteredData, params.orderBy()) 
                            : filteredData;
                params.total(orderedData.length);
                $defer.resolve(orderedData.slice((params.page() - 1) 
                    * params.count(), params.page() * params.count()));
            }
        } 
    }, function (error) {
        console.log('errror', error);
    });
});