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.

Growing Rails Applications in Practice

Check out our e-book. Learn to structure large Ruby on Rails codebases with the tools you already know and love.

• Introduce design conventions for controllers and user-facing models
• Create a system for growth
• Build applications to last

Read more Show archive.org snapshot

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.