AngularJS service only running the first time controller is used

Question

I have the following controller that uses a service Customers to return customers. The problem is that its only executing the service the first time the controller is run. Looking at my server I see its only performing the get request the FIRST time the controller used(loading that view) if I change views and say add a customer and come back to the view that list customers its not updated because there was not another get request from the service.

  .controller('searchCTRL', ['$scope', '$http', 'Customers', function($scope, $http, Customers) {
        $scope.customers = Customers;
        $scope.deleteCustomer = function(id) {
            $http.delete('/api/customer/' + id)
                .success(function(data) {
                    $scope.customers.data = data;
                })
                .error(function(data) {
                    console.log('Error: ' + data);
                });
        };
  }])

and

.factory('Customers', function($http){
    var Customers = {};
    $http.get('/api/customer')
        .success(function(data) {
            Customers.data = data;
        })
        .error(function(data){
            console.log('error: ' + data);
        });
    return Customers;
});

if I stay on the view and reload the page it gets the data like it should but any subsequent visits to the page no longer execute the get. Any help would be appreciated.

Answer 1

Angular .factory is a singleton so it will always only run once. Also, the $http call is async so you should be using promise in order to get the data to your controller. Try the following:

.factory('Customers', function($http, $q){
    return function () {
        var d = $q.defer();
        $http.get('/api/customer')
            .success(function(data) {
                d.resolve(data);
            })
            .error(function(data){
                console.log('error: ' + data);
                d.reject(data);
            });
        return d.promise;
    };
});

and in your controller:

.controller('searchCTRL', ['$scope', '$http', 'Customers', function($scope, $http, Customers) {
    Customers().then(function (data) {
        $scope.customers = data;
    });
...

As $http returns a promise, you can further simply your .factory by doing:

.factory('Customers', function($http){
    return function () {
        return $http.get('/api/customer');
    };
})

For more detail, see documentation for $http.