How to prevent flickering on array updates in angular

Question

In angular, I am trying to keep my page realtime by polling a REST service(hosted locally) and update my array with the new retrieved content like this:

JS

angular.module("WIMT").controller('overviewController', function ($scope,$interval,$http){
var reg = this;
var promise;

reg.teacherInfoList = [];

reg.dayfilter = "";


$scope.start = function() {
    $scope.stop();

    promise = $interval( $scope.longPolling, 3000);
};

$scope.stop = function() {
    $interval.cancel(promise);
};

$scope.longPolling = function(){

    reg.teacherInfoList.length = 0;

        $http({
            method: 'GET',
            url: 'api/schedules/' + "TPO01"
        }).then(function onSuccessCallback(response) {

            reg.teacherInfoList[0] = response.data;
            console.log(reg.teacherInfoList[0]);

            $scope.start();
        }, function errorCallback(response) {
            $scope.start();
        });
}


$scope.start();

});

HTML

<div ng-controller="overviewController as oc">

<ul>
    <li ng-repeat="teachInfo in oc.teacherInfoList ">
        {{teachInfo.fullname}}

        <div ng-repeat="day in teachInfo.days | filter: oc.dayfilter">
            Today is: {{day.day}} {{day.date}}

            <ul ng-repeat="roster in day.entries">
                <li>
                    Name: {{roster.name}}
                </li>
                <li>
                    Start: {{roster.start}}
                </li>
                <li>
                    End: {{roster.end}}
                </li>
                <li>
                    Note: {{roster.note}}
                </li>
            </ul>

        </div>

    </li>
</ul>

The code used as above causes flickering:

 reg.teacherInfoList[0] = response.data;

This code also causes flickering:

 reg.teacherInfoList.splice(0,1);
 reg.teacherInfoList.splice(0,0,response.data);

I have also tried to apply this to my ng-repeats:

ng-cloack

And applied this to my ng-repeats

track by $index

I have also read this:

How does the $resource `get` function work synchronously in AngularJS?

Now, I know that when I replace my array for a brief second the array is empty causing it to flicker, but I can't think of a solution to solve this problem. What would be the best way to solve this?

Answer 1

reg.teacherInfoList.length = 0;

Not sure if emptying the array is necessary here. I believe the teacherInfoList array is empty for the entire duration of the request, causing it to render as blank. You could try either removing (or commenting out) the line above or moving it into the top of the callback function of the GET request like

    }).then(function onSuccessCallback(response) {
        // applied here
        reg.teacherInfoList.length = 0;
        reg.teacherInfoList[0] = response.data;
        console.log(reg.teacherInfoList[0]);

        $scope.start();
    }, function errorCallback(response) {
        //and here
        reg.teacherInfoList.length = 0;
        $scope.start();
    });