How to remove row from grid in angularjs - angularjs

Question

I am using angularjs.
I am making simple $http.delete method call in my API for deleting row from grid table:
My controller looks like below:
$scope.removeRow = function(detail, index){
var delRes = $http.delete($scope.appUrl + detail.id);
delRes.success(function (data, status, headers, configs) {
console.log(data);
delete $scope.appDetails[index].id;
});
delRes.error(function (data, status, headers, configs) {
console.log(data);
});
};
Now, API call works fine but I can still see record in my grid on UI.
When i refresh the page i can not see.
Any reason.
Please help.

Answer 1

It seems to me like you are only deleting the id property of the appDetails's index row.
Try deleting the whole appDetails[index].
If that is not your problem you can try using $scope.$apply() with the proper checks before calling it. Works on async calls.
If you're creating an AngularJS service (such as for sockets) it
should have a $scope.$apply() anywhere it fires a callback.
$scope.$apply() should occur as close to the async event binding as
possible.
https://github.com/angular/angular.js/wiki/When-to-use-$scope.$apply()

Answer 2

You can delete the selected index itmes by using splice
Best Way
Please try this
$scope.removeRow = function(detail, index){
var delRes = $http.delete($scope.appUrl + detail.id);
delRes.success(function (data, status, headers, configs) {
console.log(data);
var index = $scope.appDetails.indexOf(detail);
$scope.appDetails.splice(index, 1);
});
delRes.error(function (data, status, headers, configs) {
console.log(data);
});
};
Another way is
Rebind | reload the $scope.appDetails value
$scope.removeRow = function(detail, index){
var delRes = $http.delete($scope.appUrl + detail.id);
delRes.success(function (data, status, headers, configs) {
console.log(data);
//Rebind the scope value
$scope.appDetails=data;// like call the grid load function
});
delRes.error(function (data, status, headers, configs) {
console.log(data);
});
};