AngujarJs - ng-repeat + instance.$remove does not update view

Question

I have two functions: One for deleting data and another one for updating data. The data comes from a Resource.query().

I'm using ng-repeat to go over every element in the collection. Since every element is a Resource object, I guess that I should be able to apply $save, $remove, ... operations.

The Html could be as simple as:

<tr ng-repeat="data in data_collection">
    <td>
        <a class="btn btn-info" ng-click="togglePublish(data,'country')">RELEASE</a>
    </td>
    <td>
        <div>
            <button class='btn btn-danger' ng-click="remove(data)">Delete</button>
        </div>
    </td>
</tr>

why if I do:

// Arg: data is a Resource object from the collection
$scope.remove = function(data){
    data.$remove();       //  <-----   THIS DOES NOT MODIFY THE VIEW
}

But this is correctly updating the data:

// Arg: original_data is a Resource object from collection 
$scope.togglePublish = function(original_data, country){

    // Deep copy
    var copy = angular.copy(original_data);

    // Modifications over the copy
    copy = toogleRegionPublication(copy, country);

    Resource().update(copy).$promise.then(function(){
        // If update was taken, then update view value
        original_data.regions = copy.regions;    // <---  THIS MODIFIES THE VIEW
    });
}

Why one of them is having some effect on the view but not the one that involves the $remove operation? Why?

Answer 1

As far as I understand

$remove

is just a HTTP DELETE method call over to your restful resource.

Answer 2

To remove the data object from the view I think you can just remove it from the data_collection array. See how to remove object from array.

However, if you still need to call http DELETE to remove that data object from your database or something, you will need to do that as well.