javascript - AngularJS unable to use scope inside a websocket callback

Question

$scope is not working inside a callback function.

angular.
module('common').
controller('bidVBoxController', ['$scope', '$location','$element', 'Socket', 'Bid',
 function($scope, $location, $element, Socket,Bid){
  var self = this;
  self.socket = new Socket("ws://192.168.225.59:8010/ws/bidData/");
  $scope.placeBid = function(){
    self.socket.send({
      type: "place_bid",
      data: {
        bidId: $scope.bid.id
      }
    });
  };
  console.log($scope.bid);
  $scope.bid.top_bid_data="sss";//This works.
  self.socket.onmessage(function(event) {
      var data = JSON.parse(event.data);
      console.log($scope.bid);//This doesn't work
      $scope.bid.top_bid_data=data["message"];//This doesn't work
  });
}])

A callback function is passed to the self.socket.onmessage, which is supposed to update $scope variable. But it appears that doesn't work. Please help.

Update1:

This controller is used with a directive bidVBox and there are multiple elements:

<bid-v-box ng-repeat="bid in bids">
</bid-v-box>

When the callback function is executed in the first bid-v-box element's controller, $scope.bid.top_bid_data=data["message"]; updates the scope of the last element and not the first one. I have also tried using $scope.$apply(function(){$scope.bid.top_bid_data=data["message"];}). But that didn't work.

Answer 1

It would be wiser to move the websocket constructor to a service and use only one connection. As written the ng-repeat is creating multiple websocket connections to the server. It is up to the server side application to treat each connection differently. Evidently the server is responding to the last connection made instead of each individually. For more information, see Stackoverflow: Multiple Websockets.

See also Github WS Issue #684 - Multiple connections, but single websocket.on("message") event emitter