AngularJS scope is updated but the UI is not

Question

I have some content populating in an ng-repeat when the page loads by setting $scope.questions and binding it. Then I'm using $interval to query the backend every few seconds to see if there are any updates - if there are I push the new data to $scope.questions.

This updates the UI, some of the time. If it starts working it will continue to do so. Most of the time though it is definitely updating $scope.questions but it isn't reflected in the UI. The intermittent nature of it makes me think it's a timing issue but I haven't been able to nail that down. Testing with the same exact actions doesn't yield consistent results.

The update is happening in scope - when I try to execute $apply or $digest I get an inproc error. $timeout doesn't seem to change anything. I'm really stuck here.

HTML

<div class="feedContainerDiv" ng-repeat="question in questions | filter:query | orderBy:orderProp:true">
    <div class="feedName">{{question.name}}</div>
    <div class="feedTitle">{{question.title}}</div>
    <div class="feedQuestion>{{question.question}}</div>
</div>

In Controller

if (updateInterval > 0) {
uiMil = updateInterval * 1000;
$interval(function() {
    QuestionFactory.getNewQuestions()
        .then(function(response) {
            if (response.data[0] !== undefined) {
                var pushObject = new Object();
                for (i = 0; i < response.data.length; i++) {
                    pushObject = response.data[i];
                    $scope.questions.push(pushObject);
                }
            }
        });
}, uiMil);
}

Answer 1

The problem was I was reloading the context under certain conditions so it was creating a new scope each time I did that. I was trying to refer to $scope.questions expecting content which was being reloaded with stale content.

Always make sure you are working within the expected scope! That's the lesson I learned here.