angularjs - Why don't child elements show inside an ng-if div when it's true?

Question

I have an ng-if div as follows:

<div ng-if="colorSelected" ng-cloak>
  <h6>My Color</h6>
</div>

When colorSelected is true, the inner header element never shows up. Am I doing something wrong?

Answer 1

Use ng-show instead of ng-if.

ng-if creates it's own scope so any scope variables you use inside of an ng-if will be related to a different scope. For example...

<div ng-if='selectedColors'>
  {{iAmDefinedInAController}}
</div>

The variable 'iAmDefinedInAController' will be empty even if it is defined in the controller because a new scope is created inside the ng-if.

ng-show does not do this, so just use that and you will be good to go.