AngularJS - $routeProvider and resolve not auto updating the view - angularjs

Question

I am having trouble getting resolve in $routeProvider to automatically update the view.
I am trying to convert an example (chapter 22) in Adam Freeman's Pro Angular book from Deployd to Express-Mongo. A possible hint is that the automatic refresh works using a local version of Deployd. When I switched to local Express and Mongo backend (after making the id to _id changes), the automatic view update no longer works.
When using Express-Mongo, I have to manually execute $route.reload() function to get show the updated changes from the database. I am new to angular so any hints are appreciated.
This heavy handed Delete works:
$scope.deleteProduct = function (product) {
product.$delete();
$route.reload();
$location.path("/list");
}
The below version Doesn't work. I was under the (probably mistaken) impression that the 'resolve' property in $routeProvider updates the view when the data is returned. With the below code, I get a Type Error: Undefined is not a function
$scope.deleteProduct = function (product) {
product.$delete().then(function () {
$scope.data.products.splice($scope.data.products.indexOf(product), 1);
});
$location.path("/list");
}
Console Log Errors
TypeError: undefined is not a function
at http://localhost:8080/bower_components/angular-resource/angular-resource.js:530:25
at Array.forEach (native)
at forEach (http://localhost:8080/bower_components/angular/angular.js:302:11)
at angular.module.factory.Resource.(anonymous function).$http.then.value.$resolved (http://localhost:8080/bower_components/angular-resource/angular-resource.js:529:17)
at deferred.promise.then.wrappedCallback (http://localhost:8080/bower_components/angular/angular.js:10905:81)
at deferred.promise.then.wrappedCallback (http://localhost:8080/bower_components/angular/angular.js:10905:81)
at http://localhost:8080/bower_components/angular/angular.js:10991:26
at Scope.$get.Scope.$eval (http://localhost:8080/bower_components/angular/angular.js:11906:28)
at Scope.$get.Scope.$digest (http://localhost:8080/bower_components/angular/angular.js:11734:31)
at Scope.ng.config.$provide.decorator.$delegate.__proto__.$digest (<anonymous>:844:31) angular.js:9383
Below is the code for the module
angular.module("exampleApp", ["ngResource", "ngRoute"])
.constant("baseUrl", "http://localhost:8080/api/products/")
.factory("productsResource", function ($resource, baseUrl) {
return $resource(baseUrl + ":id", { id: "#_id" },
{
create: { method: "POST" , isArray: true },
save: { method: "PUT", isArray: true },
delete: {method: "DELETE", isArray: true},
update: {method: "PUT", isArray: true},
query: {method: "GET", isArray: true}
})
})
.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
...
$routeProvider.otherwise({
templateUrl: "/views/tableView.html",
controller: "tableCtrl",
resolve: {
data: function (productsResource) {
return productsResource.query();
}
}
});
})
.controller("defaultCtrl", function ($scope, $location, productsResource, $route) {
$scope.data = {};
$scope.deleteProduct = function (product) {
product.$delete().then(function(products) {
//Success
console.log("Success"); //Don't Get Here
$scope.data.products.splice($scope.data.products.indexOf(product), 1);
}, function(errResponse) {
//Failure (Code Produces a Type Error: Undefined is not a function)
console.log("Error: " + errResponse);
});
$location.path("/list");
}
})
The Table View Controller that is bound to the $routeProvider.otherwise
.controller("tableCtrl", function ($scope, $location, $route, data) {
$scope.data.products = data;
$scope.refreshProducts = function () {
$route.reload();
} })

Answer 1

I think you should redirect when the delete is complete:
$scope.deleteProduct = function (product) {
product.$delete().then(function () {
$scope.data.products.splice($scope.data.products.indexOf(product), 1);
$location.path("/list");
});
}

Answer 2

You have missed } at the and of line with text:
delete: {method: "DELETE", isArray: true