AngularJS: Watch Service Property Changes

Question

I'm trying to show a simple download progress for my app. Every time a file has downloaded the total number os downloads is presented to the user. For example, File 1/5, 2/5, 5/5. The download is being done by a downloadService using promises, for every successful download a variable is incremented. I'm trying to show that number in a controller, but until now i'm unsuccessful. I'm only able to show the total number of files (another downloadService variable). I've tried to directly access the variable, tried a $watch() and nothing. The only way i'm able to access the variable is by using $interval to check for changes, but this seems to overhead for what i need.

This is what i have...

Download Service:

myApp.service('downloadService', ['$http', function($http)
{
    this.numberOfDownloads = 0;
    this.totalNumberOfDownloads = 0;
    var self = this;

    var downloadService =
    {
        downloadList: function(list)
        {
            self.numberOfDownloads = 0;
            self.totalNumberOfDownloads = list.length;

            var promise = new Promise(function(resolve, reject)
            {
                //(...)

                //update preloader
                downloadService.setDownloadStatus(self.numberOfDownloads);

                //(...)
            })
            .then(function(result)
            {
                return result;
            });

            return promise;
        },

        getDownloadStatus: function()
        {
            return self.numberOfDownloads;
        },

        getTotalNumberOfDownloads: function()
        {
            return self.totalNumberOfDownloads;
        },

        setDownloadStatus: function(value)
        {
            self.numberOfDownloads = value;
        }
    };

    return downloadService;

}]);

Preloader Controller

myApp.controller('preloader', ['$scope', 'downloadService', '$interval', function($scope, downloadService, $interval)
{
    $scope.downloadService = downloadService;

    //doesn't work...
    $scope.$watch(function()
    {
        return downloadService.getDownloadStatus();
    },
    function(value)
    {
        console.log(value);
    }, true);

    //works....
    $interval(function()
    {
        console.log($scope.downloadService.getDownloadStatus());
    }, 1000);

}]);

What am i doing wrong here? How can i accomplish this?

Answer 1

Did you try this:

 $scope.$watch(function()
 {
    return $scope.downloadService.getDownloadStatus();
 }); // parenthesis forgotten