AngularJS pre-render (cache) Controller View with static data - angularjs

Question

I'm looking to pre-render multiple controllers with static data.
My code structure
Controller in app.js file ($scope.userList = localData.users)
View in separate template file user_list.html (ng-repeat="users in userList")
My goal is to avoid flickering when rendering user_list view in angularJS on slow devices, such as phones.

Answer 1

#Ofiris answer is correct, so I upvoted it. But it only solves part of the flickering, that of a template in its raw format before Angular has a chance to render it.
There are actually 3 states to the template:
When the template is raw and unprocessed
When the template has been processed by angular
When the template has had its data loaded by angular
ng-cloak resolves the transition from 1 to 2, but it cannot resolve the transition from 2 to 3, since it does not know when all of your data is ready.
Let's say you are loading up an object via $resource or $http and it will set a scope object foo to be "Jim". Here is how your 3 states look in the browser.
First state (pre-rendering):
<div>{{foo}}</div>
Second state (post-rendering, while ajax is running in background, maybe some processing):
<div></div>
Third state (all loaded):
<div>Jim</div>
So ng-cloack very much solves the transition from 1 to 2, and hides that ugly {{foo}}, but it won't help you with the flicker from nothing to "Jim".
For that, you would need some sort of flag of your own. I wrote a directive which I wrap all of my templates in (along with ng-cloak), called "loading". Each controller sets $scope.ready = true; when all of the data is ready for state 3. But it is very simple, you just need to wrap as follows:
<div ng-hide="!ready">
<!-- all of your stuff here -->
<div>{{foo}}</div>
</div>
and then your controller can do:
.controller('MyCtrl',function($scope,MyService) {
MyService.get('/data',function(data) {
$scope.foo = data.foo; // or whatever else you do here
// other processing
$scope.ready = true; // this shows everything
});
});

Answer 2

Check out the ngCloak directive.
The ngCloak directive is used to prevent the Angular html template
from being briefly displayed by the browser in its raw (uncompiled)
form while your application is loading. Use this directive to avoid
the undesirable flicker effect caused by the html template display.
Try to place it on the list containing div.
If you would like to resolve your data before the controller is instantiated, you can use routeProvider.resolve method, see this example.