AngularJS polling service not continuously updating controller

Question

I am trying to update a controller continuously using a polling service. I have the service working and can verify it is polling and getting new data properly. What I can't get working is the updating of the controller that uses that service.

Here is what I have:

cadApp.controller('statsController', function ($scope, DashboardStats) {
    $scope.data = DashboardStats.data.response;
    console.log(JSON.stringify(DashboardStats.data.response));    
});

cadApp.run(function (DashboardStats) { });

cadApp.factory('DashboardStats', function ($http, $timeout) {
    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

    var data = { response: {}, calls: 0 };
    var url = "Ajax/CADAjax.aspx";
    var params = { "Command": "GetDashboardStats" };

    var poller = function () {
        $http.post(url, Object.toparams(params))
     .then(function (responseData) {
         data.response = responseData.data[0];

         // This is working
         console.log(JSON.stringify(responseData.data[0]));
         data.calls++;
         $timeout(poller, 10000);
     });
    };
    poller();

    return {
        data: data
    };
});

The UI never updates with the current object returned by the polling service. My guess is that the return statement in the service isn't right. It is only returning the mostly empty object declared at the top of the service.

How do I get the service to automatically update the controller whenever the http response comes back?

Answer 1

You got to return some of that data - and dont put the timeout logic in the service - that should be contained in the controller code. You can refactor to handle the response in the controller and the data call contained in the service:

cadApp.controller('statsController', function ($scope, $timeout, DashboardStats) {
    pollData();

    function pollData() {
        DashboardStats.poll().then(function(data) {
            $scope.data = data;
            $timeout(pollData, 10000);
        });
    }
});

cadApp.factory('DashboardStats', function ($http, $timeout) {
    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

    var url = "Ajax/CADAjax.aspx";
    var params = { "Command": "GetDashboardStats" };
    var data = { response: { }, calls: 0 };

    var poller = function () {
        return $http.post(url, Object.toparams(params)).then(function (responseData) {
            data.calls++;
            data.response = responseData.data[0];

            return data;
        });
    };

    return {
        poll: poller
    }
});