Angular two way binding not working

Question

I'm very new to angularjs and I want to establish a connection to my server and dynamically show the result to user. so far I've tried:

angular.module('myApp.controllers', []).controller('socketsController', function($scope) {

  $scope.socket = {
    client: null,
    stomp: null
  };

  $scope.reconnect = function() {
    setTimeout($scope.initSockets, 10000);
  };

  $scope.notify = function(message) {
    $scope.result = message.body;
  };

  $scope.initSockets = function() {
    $scope.socket.client = new SockJS('/resources');
    $scope.socket.stomp = Stomp.over($scope.socket.client);
    $scope.socket.stomp.connect({}, function() {
      $scope.socket.stomp.subscribe('/user/topic/messages', $scope.notify);
    });
    $scope.socket.client.onclose = $scope.reconnect;
  };
  $scope.initSockets();
});

But when I use {{result}} nothing appears.

UPDATE The server response is totally right with console.log(message.body) .

Answer 1

I guess, the callback is not taking the scope properly. Try call $scope.$apply(); after you attach the message.body to result :

$scope.notify = function(message) {
    $scope.result = message.body;
    $scope.$apply();
  };

$scope.$apply() triggers an angular digest cycle whcih will update all the bindings..

Answer 2

Call it inside a timeout function but inject $timeout first it will call the digest cycle and update the value.

$timeout(function(){
$scope.result = message.body;});