Angularjs model changes after websocket data push from server

Question

Angularjs model changes after websocket data push from server

I'm trying to change my angular model after a websocket push from the server. How is it possible to change values like $scope.contacts each time the server serves new data. Can anyone provide a code example, because I'm not sure if it is possible by using $apply? I know that I can access the DOM element retrieve the scope and then change the values, but there should be a better solution!

I'm really interested in a solution to update the angular model from outside without creating angular modules since I'm using reative datasources that emit change events. Is there no simple way to do that like in Backbone.js where you can say:

var book = new Backbone.Model({ title: 'value' });
book.set("title", "A Scandal in Bohemia");

What I want in angularjs is something like:

function MyController($scope) {
    $scope.contacts = [];
}

datasource changed -> function () {
    MyController.set('contacts', 'value'); // change angular scope property
}

Thanks for your help!

javascript
websocket
angularjs
socket.io

Answer 1

Look at socket.io angular service:

angular.module('app')
  .factory('socket', ['$rootScope', function ($rootScope) {

    var socket = io.connect();

    return {
      on: function (eventName, callback) {
        socket.on(eventName, function () {  
          var args = arguments;
          $rootScope.$apply(function () {
            callback.apply(socket, args);
          });
        });
      },
      emit: function (eventName, data, callback) {
        socket.emit(eventName, data, function () {
          var args = arguments;
          $rootScope.$apply(function () {
            if (callback) {
              callback.apply(socket, args);
            }
          });
        })
      }
    };

  }]);

and controller using it:

angular.module('app')
  .controller('Controller', ['$scope', 'socket', function ($scope, socket) {

    socket.emit('register')

    socket.on('register', function (data) {
        $scope.data = data;
    });

}]);

Answer 2

just do it like below

 socket.onmessage = function (event) {
     scope.$apply(function(){
       // modify scope values here 
     }
    };

Answer 3

Well, the marked answer is certainly not a "simple way" as requested by OP. Here's a much simpler solution.

Retrieve the scope wherever you want in your own JavaScript code:

var scope = angular.element($("#elementID")).scope();

Change a value in your Angular $scope variable, but from your external JavaScript:

scope.$apply(function() {
    scope.yourArrayForExample.push({name: 'New, external value'});
});

Here's a JSFiddle.