$interval making $http call, which promise is returned for chaining?

Question

I have an angular service and a controller interacting. The service usings the $interval to poll the server. I know this returns a promise, however it uses $http to make an call to the server, which ALSO returns a promise and the chaining of the promises is not happening the way I would expect.

SERVICE

(function () {
    'use strict';

    var serviceId = "notificationService";

    angular.module('app').factory(serviceId, ['helpersService', '$interval', '$http', function (helpersService, $interval, $http) {
        var defaultOptions = {
            url: undefined,
            interval: 1000
        };

        var myIntervalPromise = undefined;
        var displayedNotifications = [];

        function onNotificationSuccess(response) {
            //alert("in success");
            displayedNotifications.push(response.data);
            return response.data;
        }

        function onNotificationFailed(response) {
            alert("in Failure");
            throw response.data || 'An error occurred while attempting to process request';
        }


        function initializeNotificationService(configOptions) {

            var passedOptions = $.extend({}, defaultOptions, configOptions);

            if (passedOptions.url) {

                myIntervalPromise = $interval(
                    function() {
                        //console.log(passedOptions.url);

                        //return helpersService.getAjaxPromise(passedOptions);
                        //promise.then(onNotificationSuccess, onNotificationFailed);

                        $http({
                            method: 'POST',
                            url: passedOptions.url
                        }).then(onNotificationSuccess, onNotificationFailed);

                    }, passedOptions.interval);

                //alert("in initializeNotificationService");
                return myIntervalPromise;
            }
            //return myIntervalPromise;
        }

        //$scope.$on('$destroy', function() {
        //    if (angular.isDefined(myIntervalPromise)) {
        //        $interval.cancel(myIntervalPromise);
        //        myIntervalPromise = undefined;
        //    }
        //});

        return {
            // methods
            initializeNotificationService: initializeNotificationService,
            //properties
            displayedNotifications : displayedNotifications
        };
    }]);

})();

CONTROLLER

    (function () {
    'use strict';

    var controllerId = 'MessageCtrl';
    //TODO:  INVESTIGATE HAVING TO PASS $INTERVAL TO HERE TO DESTROY INTERVAL PROMISE.
    //TODO:  HAS TO BE A WAY TO MOVE THAT INTO THE SERVICE
    angular.module('app').controller(controllerId, ['notificationService', '$scope', '$interval', function (notificationService, $scope, $interval) {
        var vm = this;
        // tied to UI element
        vm.notifications = [];

        vm.initialize = function () {
            // initialize tyhe notification service here
            var intervalPromise = notificationService.initializeNotificationService({ url: 'api/userProfile/getNotifications', interval: 5000 });

            intervalPromise.then(
                    function (response) {
                        // NEVER GETS CALLED
                        var s = "";
                        //vm.notifications.push(response);
                        // alert("successful call");
                    },
                    function (response) {
                        var s = "";
                        // THIS GETS CALLED WHEN THE PROMISE IS DESTROYED
                        // response = canceled
                        //alert("failure to call");
                    },
                    function(iteration) {
                        console.log(notificationService.displayedNotifications);
                        // This gets called on every iteration of the $interval in the service
                        vm.notifications = notificationService.displayedNotifications;

                    }
                );
            // TODO:  SEE COMMENT AT TOP OF CONTROLLER
            $scope.$on('$destroy', function () {
                if (angular.isDefined(intervalPromise)) {
                    $interval.cancel(intervalPromise);
                    intervalPromise = undefined;
                }
            });
        };

        vm.alertClicked = function (alert) {
            alert.status = 'old';
        };

        // call to init the notification service here so when the controller is loaded the service is initialized
        vm.initialize();

    }]);
})();

The way this ends up flowing, and I'll do my best to show flow here

1) SERVICE - $interval makes the call with the $http BOTH OF THESE SEEM TO RETURN THEIR OWN PROMISES ACCORDING TO THE DOCS

2) CONTROLLER - intervalPromise's NOTIFY callack is called

3) SERVICE - onNotificationSuccess callback of $http is called WHAT DOESN'T HAPPEN THAT I WOULD EXPECT

4) CONTROLLER - intervalPromise success callback is never called

Should the return response.data in the onNotificationSuccess handler within the service trigger the then chain in the Controller? It's aware that the promise is returned or seemingly cause the notify callback in the controller is called each time $interval executes, so I'm confused as to where the chain is broken.

IDEAL $interval calls with $http, the promise from $http is passed up to the controller then with each iteration new messages are added to the service on a successful call by $interval, then in the controller onsuccess I can check the property of the service and update the UI. Where am I losing the method chain?

Answer 1

Ended up with everything in the controller...

(function () {
    'use strict';

    var controllerId = 'NotificationCtrl';
    angular.module('app').controller(controllerId, ['helpersService', '$scope', '$interval', function (helpersService, $scope, $interval) {
        var vm = this;
        var intervalPromise = undefined;
        // tied to UI element
        vm.notifications = [];

        function onNotificationSuccess(response) {
            //alert("in success");
            vm.notifications.push.apply(vm.notifications, response.data);
            return response.data;
        }

        function onNotificationFailed(response) {
            //alert("in Failure");
            throw response.data || 'An error occurred while attempting to process request';
        }

        vm.initialize = function () {
            intervalPromise = $interval(
                    function () {
                        var promise = helpersService.getAjaxPromise({ url: 'api/userProfile/getNotifications' });
                        promise.then(onNotificationSuccess, onNotificationFailed);
                    }, 5000);

            $scope.$on('$destroy', function () {
                if (angular.isDefined(intervalPromise)) {
                    $interval.cancel(intervalPromise);
                    intervalPromise = undefined;
                }
            });

        };

        vm.alertClicked = function (alert) {
            //alert.status = 'old';
        };

        // call to init the notification service here so when the controller is loaded the service is initialized
        vm.initialize();

    }]);
})();

Answer 2

I would recommend breaking the usage of $interval outside of service and use it directly in your controller.

The service being provided is the ability to get data from the server and the interval is the means in which to get the data, which is more indicative of the user interface's requirements as to how often the data is retrieved.

What you appear to be doing is to wrap the functionality of the $interval service which is causing a complication for you.

Note: after creating a quick plnkr the report progress event of $interval returns the iteration number (times called) and no other parameters.