How to filter in ngTable - angularjs

Question

With Angular, I'm doing http request to take data. I've added ngTable and using it to display data. They correctly display in the table but I can't filters, sorting and delete them. Why?
js:
$scope.cancel = cancel;
function cancel(row, rowForm) {
var originalRow = resetRow(row, rowForm);
angular.extend(row, originalRow);
}
$scope.tableParams.reload().then(function(data) {
if (data.length === 0 && $scope.tableParams.total() > 0) {
$scope.tableParams.page($scope.tableParams.page() - 1);
$scope.tableParams.reload();
}
});
$http.get('my_url')
.success(function(data, status) {
$scope.data = data;
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: $scope.data.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
var orderedData = params.sorting() ?
$filter('orderBy')($scope.data, params.orderBy()) :
$scope.data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});
html:
<table ng-table="tableParams" show-filter="true" class="table table-bordered table-striped">
<tr ng-repeat="row in data track by row.id">
<td title="'Id'" filter="{id: 'text'}" sortable="'id'">{{row.id}}</td>
<td title="'Company'" filter="{company: 'text'}" sortable="'company'">{{row.company}}</td>
<td title="'Email'" filter="{email: 'text'}" sortable="'email'">{{row.email}}</td>
<td title="'Note'" filter="{note: 'text'}" sortable="'note'">{{row.note}}</td>
<td>
<button class="btn btn-default btn-sm" ng-click="cancel(row, rowForm)"><span class="glyphicon glyphicon-remove"></span></button>
</td>
</tr>
</table>

Answer 1

You are not applying any filters inside getData method.
First, you need to filter the data, then you sort:
getData: function($defer, params) {
// I will use a copy of the data to always start with the original data
// array ($scope.data). If you are getting the data with $resource or $http
// you can replace the $scope.data with the data obtained (eg.: response.data)
var theData = angular.copy($scope.data);
// First we filter using the filter object provided by the
// method 'filter()' of ngTableParams instance.
var filterObj = params.filter(),
filteredData = $filter('filter')($scope.data, filterObj);
// Then we sort the FILTERED DATA ARRAY
// NOTICE that the first parameter provided to $filter('orderBy')
// is the filtered array <filteredData> and not the original
// data array.
var sortObj = params.sorting(),
orderedData = $filter('orderBy')(filteredData, sortObj);
// Then we return the final data array (orderedData)
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}