AngularJs + Pubnub data binding

Question

I use the PubNub+AngularJS script file provided by Pubnub. I have a controller that sets up the channels and subscribes to it. I set the scope variable in the callback function, and I see the value being updated in the scope function. The problem is that this scope variable, that just got updated is not reflected back in the html page. The console outputs say that the pubnub message calls the callback method and i get the messages. But for some reason the variable data is not reflected to the html. Here is the code:

TitleBarController.js

    $scope.ops_tl = new Object();
    $scope.ops_tl.data = new Array();
    $scope.ops_tl.data.push("dummy");
    console.log("pp ", $scope.ops_tl==undefined);
    PubNub.ngSubscribe({ channel: channelsToAutoSubscribe[0] });

    $rootScope.$on(PubNub.ngMsgEv(channelsToAutoSubscribe[0]), function(event, payload) {
    // payload contains message, channel, env...
        console.log('got a message event:', payload);
        if(payload.channel == channelsToAutoSubscribe[0]) {
                // i.e. ops_tl channel
                // parse message and populate channel specific variable
                console.log($scope.ops_tl.data);
                $scope.ops_tl.data.push(payload.message);
                console.log($scope.ops_tl.data);
        }
        else {
            console.log("Received message %s from an unknown channel %s", message, channel);
        }

    });

index.html

        <div class="btn-group" ng-controller="TitleBarController">
            <button data-toggle="dropdown" class="btn dropdown-toggle">
                New users -
                <span> {{ ops_tl.data.length }} </span>
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li ng-repeat="item in ops_tl.data"><a href="#/onboarding/{{ item.data.id }}">New user - {{ item.data.name }}</a></li>
            </ul>
        </div>

This looks like an angular question mostly. I think you need to have some sort of special angular consideration for the `ops_tl` object. — Stephen Blum, Nov 25 '15 at 20:29

score 1 · Accepted Answer · answered Nov 25 '15 at 21:40

You're running into an issue related to the way the event loop in angular is handled. What you need to do is defer the assignment of the scope variable into a new tick on the event loop. The easiest way for you to do this is to leverage the $timeout service in angular.

Try changing this line:

$scope.ops_tl.data.push(payload.message);

To this:

$timeout(function() {
    $scope.ops_tl.data.push(payload.message);
});

AngularJs + Pubnub data binding

1 Answers1