Angularjs Phonegap Android using Websockets-Collection of common programming errors

I don’t even know how to explain this directly, but I’ll try.

Intro

I’m building a Phonegap App with angularjs, and I’m trying to stitch up WebSocket messages to update my UI. I used to have services that communicate with the server periodically and change their data accordingly and it was working pretty well. An example:

Service1.js:

     var applyUpdate = function (
         angular.extend(instance, data);
         if (!$rootScope.$$phase) $rootScope.$apply();
     };

     this.update = function () {
         DataProvider.get('getThermostatSettings', {}, applyUpdate, function(){}, true);
     }

So basically I was simply calling the “update” function every 5 seconds, receiving data from the server and updating this service. The controllers would then simply access this service, and everything was working.

The problem

The problem now, is that I stitched up a WebSocket Interface written in java, that handles all the websocket implementation for me. I took it from: https://github.com/ziadloo/PhoneGap-Java-WebSocket . It basically registers an Javascript Interface accessible from Javascript to communicate with java.

Everytime I have a change now, I simply push a string from the server via the WebSocket saying that it should update, and then I call the “update” function from the service in my javascript, instead of querying for data periodically, which is just stupid.

The WebSockets are working well. I can see the message coming, I call the update, it fetches everything correctly from the server, the “update” function calls then the “applyUpdate” with the correct values and etc, even the “$rootScope.$apply” gets called.

But all updated data inside the angular Service is not visible! It seems that all these changes are being run in a different thread!?!?. I know javascript is single threaded, but it just seems so.

Let me put this in a better way: I have the impression that as soon as the WebView calls the javascript callback function, I have a different javascript “thread” running, and nothing outside it can be accessed

More about it

I wrote a function that simply outputs a number every 5 seconds. The websocket updates this number. And my output is the following:

N: 1
N: 1

Then after the WebSocket pushes the data with a new Number (2), I get TWO prints:

N: 1
N: 2

N: 1
N: 2

N: 1
N: 2

Anyone has any pointers about this? Anyone tried doing something similar? I’m no angular pro, but it just seems that everything gets messed up as soon as I get a callback from the java interface.

I have already looked at: Angularjs model changes after websocket data push from server and my code looks very similar. The only problem I think is this callback from Java.

Thank you

Update : It’s a problem with AngularJS. If I set this variable in a window global variable, everything get’s assigned normally. Is it possible that Angular is somehow creating two different $scopes?

Update[2]: Just to be a bit more clear: In the browser, everything works as expected. Only when I run it in the emulator that this thing gets messed up.