Dynamically Update Model From Web Socket

Question

Update (High Level Idea/Concept)

To summarize I would like values to be dynamically updated in a controller which is binded to a Web Socket Service, which value change. Below is my attempt of how to solve the problem and the barrier which I am facing.

I would like to update the view model in the controller, each time that the socket pushes information in the service. To mimic the pushing of messages I am just calling a timeout every second, which in turn increase the value of health within the service, which I verified it works in console.

Though the value of the health within controller is never updated, and I am at a loss of of what I am doing wrong. Below are the snippets of relatable code.

This is the controller

(function () {
    'use strict';
    angular
        .module('xxx')
        .controller('DashboardController', ['$scope','$timeout', "$uibModal", "dashboardService", "syncService", DashboardController]);

    function DashboardController($scope, $timeout, $uibModal, dashboardService, syncService) {
        var vm = this;

        // VERSIONS
        vm.versions = {};

        // HEALTH
        vm.health= syncService.health;

        // JUMP-START
        activate();

        //////////////

        function activate(){
           getVersions();
        }

        function getVersions(){
            dashboardService.getVersions()
                         .then(function(data) {
                            vm.versions = data;
                            return vm.versions;
                         });
        }

    }
})();

This is the service

    (function () {
        'use strict';
        angular
            .module('xxx')
            .service('syncService',['$timeout', syncService]);

        function syncService($timeout) {
            //Init WebSocket
            var self = this;
            self.health= 0;
            updatedStatus();
            ///////////

            ....

        function updatedStatus(){
            $timeout(updatedStatus, 1000);
            self.health += 1;
            $timeout(angular.noop);   
        };
    }
})();

Update

I would like to know how to make it work without using $scope. Example like in the accepted answer in the following question

thank you

http://stackoverflow.com/questions/12576798/angularjs-how-to-watch-service-variables — Matt M, Jul 22 '16 at 13:00

score 1 · Accepted Answer · answered Jul 22 '16 at 13:53

AFAIK, you'll need to put a watch on the service variable. This is what I did to get this to work:

  function DashboardController($scope, $timeout, $uibModal, dashboardService, syncService) {
    var vm = this;

    // VERSIONS
    vm.versions = {};

    // HEALTH
     vm.syncService = syncService;

     $scope.$watch('vm.syncService.health', function(newHealth, oldHealth){
        vm.health = newHealth;
     })

    // JUMP-START
    activate();

    //////////////

    function activate(){
       getVersions();
    }

    function getVersions(){
        dashboardService.getVersions()
                     .then(function(data) {
                        vm.versions = data;
                        return vm.versions;
                     });
    }

}

I linked a similar question in the comments and in the answers they also talk about using $broadcast if you need more than one controller to be aware of any changes to the variable's value in your service.

Thanks for the response, upon attempting to apply your solution to my code, I still was receiving undefined in my controller. If it works on your end could you make quick Fiddle with the running code so I can cross reference. Thanks again. — Erik-Smies, Jul 22 '16 at 15:28
Actually upon changing the vm.syncService to $scope.syncService the code you provided does work thank you. — Erik-Smies, Jul 22 '16 at 15:50
That example appears to be using $broadcast and/or $emit (these are $scope methods). See the link in my answer to get a better understanding of how they work. — Matt M, Jul 22 '16 at 16:12

Dynamically Update Model From Web Socket

1 Answers1