angularjs is not updating datanbinding with websocket

angularjs is not updating datanbinding with websocket  using -'share'

Hello I'm trying out databinding with AngularJS in combination with an websocket. When the Websocket fires a response, the data should be displayed on a site, but it doesn't work the way I thought.

This is my JS:

 function WebApp() {
  this.webSocket = null;
  this.workdata = null;

  var that = this;

  this.AngularApp = angular.module('AngularApp', []);
  this.AngularApp.controller('AngularCtrl', function ($scope) {
     $scope.workdata = that.workdata;

  this.initializeWebsocket = function() {
      this.webSocket = new WebSocket('ws://url2ws');
      this.webSocket.onmessage = function(resp) {
        that.workdata = JSON.parse( );


var app = null;

$( 'document' ).ready(function() {
    app = new WebApp();

And this is my HTML:

    <!doctype html>
<html class="no-js" ng-app="AngularApp">
 <script src="js/vendor/jquery.js"></script>
 <script src="js/app.js"></script>
  <script src="js/angular.min.js"></script>
<body ng-controller="AngularCtrl">
Field1 : {{workdata.field1}}<br />
Field2 : {{workdata.field2}}

At first Field1 and Field2 is empty. But when the Websocket is receiving data, the received data in resp is correct and workdata is also filled correctly. But nothing changes on website. Maybe you can help me to correct my code.

asked Oct 19, 2015 by santosh soni
0 votes

2 Answers

0 votes

The variable is only filled in at the moment the controller is created, in the line $scope.workdata = that.workdata;. Modifying that.workdata afterwards, will not update $scope.workdata, so the watch {{workdata.field1}} will still display the original value.

To solve this, modify the scope's value and make sure to call $scope.$apply whenever you are modifying the scope outside of AngularJS's structures. The WebSocket callback is not handled by AngularJS so you have to call $scope.$apply to notify AngularJS to retrigger its cycle.

In addition, I would highly recommend to code your application in AngularJS structures, instead of using AngularJS as a library as you are doing now. See this excellent answer in that regard.

answered Oct 19, 2015 by badhwar.rohit
0 votes

Issue is with invalid order of

Change order to

answered Oct 19, 2015 by sachin wagh