javascript - angular.js: model update doesn't trigger view update

Question

i'm currently working on a web based twitter client and therefore i used angular.js, node.js and socket.io. i push new tweets via socket.io to my client, where a service waits for new tweets. when a new tweet arrives, the service send an event via $broadcast.

in my controller is a event listener, where incoming tweets are being processed in an seperate function. this function simply pushes the new tweet in my tweet scope.

now, my problem ist, that my view is not updating but i can see my scope growing. maybe one of you have an idea, how i can solve this?

additionally my code:

service:

(function () {
    app.factory('Push', ['$rootScope', function ($rootScope) {
        socket.on('new-tweet', function (msg) {
            $rootScope.$broadcast('new-tweet', msg);
        });
    }]);
}());

controller:

(function () {
    app.controller("StreamCtrl", function StreamCtrl ($scope, $rootScope, $http, Push) {
        $scope.tweets = [];

        $http
            .get('/stream')
            .then(function (res) {
                $scope.tweets = res.data;
            });

        $scope.addTweet = function (data) {
            $scope.tweets.push(data);
            console.log($scope.tweets);
        };

        $rootScope.$on('new-tweet', function (event, data) {
            if (!data.friends) {
                $scope.addTweet(data);
            }
        });
    });
}());

the whole project is here: https://github.com/hochitom/node-twitter-client

Answer 1

Adding below line of code in addTweet and the problem would be solved

$scope.addTweet = function (data) {
            $scope.tweets.push(data);
            $scope.$apply();
            console.log($scope.tweets);
        };