The ng-cloak directive was added to Angular in order to prevent the flickering of elements before your application has fully loaded. It then removes ng-cloak once it has had a chance to compile your views. However, there is still a flicker issue that occurs between when the view is first loaded and before Angular has had a chance to run.

How ng-cloak Works

The way that ng-cloak works is to add display: none !important to items using it. The following code comes directly from the angular.js source file:

[ng:cloak], 
[ng-cloak], 
[data-ng-cloak], 
[x-ng-cloak], 
.ng-cloak, 
.x-ng-cloak {
  display: none !important;
}

So, What’s the Problem?

The problem is that the style used to hide these items is included in the JavaScript file which takes a second to initialize. In this time period the CSS will not be parsed by the browser.

The Fix

It is only a brief flicker but it is still undesired. Fortunately the fix is a very simple one. All you need to do is add the above CSS somewhere in your application stylesheet. That’s all there is to it.