Issues with route states not being triggered even with $apply

[Nick Jennings]

Hello all,

 I've been trying to adopt AngularJS over the past month, but am consistently running into strange issues regarding async calls and the $rootScope.$apply() function. I'm at another crossroads where I just can't seem to get an operation (routeChange) to complete.

 In this case. I have a certain initialization executed during initialization of the application, and also run during page changes. It's a websocket call to a backend, the connection seems to establish alright, but then when I go to send the first command (a register command), it completes, but the promises don't seem to trigger the completion (or error) or the route.

When I tried to wrap the defer.reject() or defer.resolve() in a $rootScope.$apply() I get the error that an $apply is already in progress. Yet I never get a routeChangeSuccess or routeChangeError.

The part in question looks like this, it's within a factory class:

  function register() {

    var defer = $q.defer();


    websocket.register({
      secret: config.secret

    }).then(defer.resolve, function (err) { // sockethub registration fail

      console.log('registration failed: ', err);

      defer.reject({error: 'register', message: err});

    });
    return defer.promise;

  }

The 'websocket' library is a 3rd party library. the register function sends some data via. websockets to a backend. I get both the failure and success promise resolution, as expected, but the defer.reject or defer.resolve do not have any effect on AngularJS and the app simply stops.

As I mentioned above, wrapping the defer's in $apply()'s caused nothing different to happen during the initial page load (the initialization did not complete, and I got no errors), and the during page changes - the intialization function detects the app is still not registered so it calls the register function again and - it gets an error that $apply is already in progress, but still nothing happens (no route resolution is reached).

It's suprisingly difficult to integrate anything outside of the Angular world into this app. Any async calls have mysterious behavior, most of the time the app simply stops with no errors. I have no other recourse but to try to wrap everything in $apply()'s but now that's not even working, and it's the only trick in my bag of Angular tricks.

For such an initially elegant looking framework, this $apply mess causes a lot of problems. Surely there is an easier way to deal with non-Angular JS code.