Update WebSocket Scope service in Angular (using ngWebSocket)?

Question

I am trying to get data coming from websocket in order to automatically update the value inside the control area.

My service:

mimosaApp.service("Device", function ($websocket) {
    var self = this;
    var ws = $websocket.$new({
        url: "ws://" + window.location.host + ":81",
        //mock: true,
        reconnect: true
    });
    this.data = {};

    ws.$on("$open", function() {
        ws.$emit("get", "device");
    });
    ws.$on("$message", function (message) {
        console.log("WS Received", message);
        for(var key in message) {
            self.data[key] = message[key];
        }
        console.log(self.data); // At this point, self.data contains the proper data.
    });
    this.send = function (obj) {
        ws.$emit("set", obj);
    };
});

And my simple controller:

angular.module("MimosaApp").controller("PageController", ["Device", "$scope", "$http", function(Device, $scope, $http) {
    $scope.device = Device;
}]);

When a socket connection is made, the browser sends a data request message ($ open event). When it receives a response, it updates the Device.data object with a JSON object.

But I don’t see it reflected in my scope / view. If inside the controller I set something like Device.data.name ='blah';, I can see the name property in the controller scope / view.

I'm a little new to Angular, so sorry if my question is not entirely clear. :)

My mind is trying to use it like:

<div class="container-fluid">
    location
    <ul>
        <li ng-repeat="(key, value) in device.data">
            {{key}}: {{ value }}
        </li>
    </ul>
    <p>{{device.data.face}}</p>
</div>

Answer 1

, , scope.$apply $on. , angular - , . , $rootScope, $timeout, .

: -

$timeout

 ws.$on("$message", function (message) {
        console.log("WS Received", message);
        for(var key in message) {
            self.data[key] = message[key];
        }
        console.log(self.data); // At this point, self.data contains the proper data.
       $timeout(angular.noop); //<-- just invoke a dummy digest
    });

$rootScope

 ws.$on("$message", function (message) {
        console.log("WS Received", message);
        for(var key in message) {
            self.data[key] = message[key];
        }
        console.log(self.data); // At this point, self.data contains the proper data.
      $rootScope.$apply(); //invoke digest
    });

, $q.

mimosaApp.service("Device", function ($websocket, $q) {
    var self = this;
    var _dummyPromise = $q.when(); //<-- here
    var ws = $websocket.$new({
        url: "ws://" + window.location.host + ":81",
        //mock: true,
        reconnect: true
    });
    //...


    ws.$on("$message", function (message) {
        console.log("WS Received", message);
        for(var key in message) {
            self.data[key] = message[key];
        }
       _dummyPromise.then(angular.noop); //<-- here
    });
    this.send = function (obj) {
        ws.$emit("set", obj);
    };
});

Answer 2

, $callback $digest, .

, $rootScope

mimosaApp.service("Device", function ($rootScope, $websocket)

$digest

ws.$on("$message", function (message) {
    console.log("WS Received", message);
    for(var key in message) {
        self.data[key] = message[key];
    }
    if(!$rootScope.$$phase) { // prevents triggering a $digest if there already one in progress
        $rootScope.$digest()
    }
    console.log(self.data); // At this point, self.data contains the proper data.
});