AngularJS 1: How to keep "ng-hidden" elements from flickering on page load

When you have an element you want to hide, you can add a ng-show='isOpen' attribute to that element. When you set isOpen to false on the scope, the element will be hidden.

However, when you load the page, the element is usually rendered by the browser before Angular has loaded and had a chance to hide it.

Generic fix (prefer)

The ng-cloak directive Show archive.org snapshot was designed for exactly this purpose. Add a ng-cloak attribute or class (and more, see the link) to any element you want to have hidden until Angular wakes up.

Specific fix

ngHide/ngShow internally toggle the ng-hide class on the element. Just add it to your element to have it already hidden on page load:

<some-element ng-show="isOpen" class="ng-hide"> ... </some-element>

Since this requires knowledge of the inner workings of ng-hide, you should avoid it and prefer the ng-cloak approach.