How do you add a callback to an angular resource?


I have a view showing a list of items:

<li ng-repeat="item in items">{{}}</li>

The service associated with this is:

angular.module('itemService', ['ngResource']).
factory('Item', function($resource){
return $resource('/api/v1/item/:itemId', {}, {
query: {method:'GET', params:{itemId : ''}, isArray : true},
get: {method:'GET', params:{itemId : ''}, isArray : false},
save: {method:'POST', params:{itemId : ''}, isArray : false},
update: {method:'PUT', params:{itemId : '@_id.$oid'}, isArray : false}

finally I use query when the controller is initialied to load the list of items.

function ItemCtrl($scope, Item) {

$scope.items = Item.query();

On the same page I can create new items and call save() to save them to the server. But when I do this I would like to update the view to show the new item instead of reloading the whole list with query(). Since the view is the official record I assume that after successfully saving the item I should push it to the end of items. This should be done after save() completes so I would like to know how to add/specify a callback to the save function.

EDIT: save() returns a copy of the saved item (if successful) so I can ensure that the item was saved successfully on the server.

Problem courtesy of: nickponline


From the documentaton here:

Item.$save(function(item, putResponseHeaders) {
//item => saved user object
//putResponseHeaders => $http header getter

Solution courtesy of: lucuma

View additional discussion.