Angular.js - Socket.io Event Updates Model, Not View

I have sockets working, in that each client seems to be running the proper code block that console.logs the event. The client that sends the message updates the view, but the other

Solution 1:

The issue is that Socket.io does not live inside the angular lifecycle, and thus Angular doesn't know new data has come in. You're right that you need to inject $scope into your controller, and the perform a $scope.$apply() inside your socket.io callback, as the last action.

$scope.$apply() lets angular know that data has updated, and to refresh what needs to be refreshed.

app.controller('StoryController', ['$http', '$scope', function($http, $scope){
    var story = this;

    socket.on('new storyPoint', function(msg){
        //console.log('new storyPoint!', msg);            
        $scope.$apply(function(){
            story.points.push(msg);
            $('.story').scrollTop($('.story')[0].scrollHeight);
            console.log('last story point:', story.points[story.points.length - 1]);             
        });
    });
}]);

Solution 2:

Following code work for me, Whenever you get message from socket you just need to bind your code inside $scope.$apply() function

 socket.onmessage = function (e) {

            $scope.$apply(function () {
                $scope.onMessge(e);
            });

        };