I’m trying to update my UI based off a signalR callback in angluarJs with typescript. I get the callback every time, but I’m getting random results to update the UI. Sometime it works and sometimes it doesn’t without changing code.

Here is my controller constructor that listens to the signalR events:

    var chat = this.$.connection.chatHub;

    chat.client.userListUpdated = (name: any, message: any): void => {

        this.$scope.$apply(() => {
            this.UserList = message; 
        });

    };

    this.$.connection.hub.start().done(() => {        
    });

Like I said I get the callback every time I expect to. It's just this.UserList is bound to the UI and doesn't work every time. It’s inconsistent, it works sometimes and doesn’t other times.

When it works the scope looks like this:

And when it doesn't update scope looks like this:

I noticed when it doesn’t work I get allot more properties in the scope, and the parent is null, watchers is null. But the vm ClassRoomRaciliatorHomeController is the same.

This is hard to figure out cause it happens inconsistency, it works, works, then doesn’t work, then works… ect…

Any insight would be helpful.

I tried doing rootscope.apply() see the same thing. Tried replacing function with () =>() syntax with typescript and see the same thing…