Prevent AngularJs content flash on $scope update

Question

When I update my $scope like so in a controller

$scope.item = "Hello";

Then the whole DOM for item seems to be removed and then added again. This seems fine, but if I have a list of items and do

$scope.items = Resource.query(); 

To update all the items then all of the DOM for items is removed and then re-added, this looks a broken and clumsy - is there anyway around this removing and then adding of the DOM elements when $scope is updated?

This issue is further exasperated if $scope.items and its children are used inside several ng-repeat statements as all of those ng-repeat sections are removed and then re-added.

EDIT

I have read this and feel that this is the issue https://www.binpress.com/tutorial/speeding-up-angular-js-with-simple-optimizations/135

That I have so much "stuff" going on the $digest is just slow. I am working on an example but in the mean time imagine this try of data

{
    {
        id: 1, 
        name: "name1", 
        something: {
            id: 10,
            name: "something10"
            else: {
                id: 15,
                name: "else15"
            }
        }
    }
}

But there are 20 such objects all with nested objects - this appears to be the issue. That there are so many objects being parsed and bound to the DOM that the $watchers are just taking a long time to go over everything.

EDIT 2

I made this demo, perhaps I am using resource wrong? http://plnkr.co/edit/QOickL0Dyi8jmuvG9mzN

But the items are replaced every 5 seconds, on replace they all disappear and then reappear. This is the issue I am having.

Answer 1

If you'll take a look at $resource documentation, you'll see that the correct way of manipulation with data - to use callback function

Instead of

 $scope.items = Resource.query(); 

Try

Resource.query(function(data) {
    $scope.items = data;
});