The ng-if directive compliments the ng-unless (provided by NgUnlessAttrDirective) directive.

directive based on the truthy/falsy value of the provided expression. Specifically, if the expression assigned to ng-if evaluates to a false value, then the subtree is removed from the DOM. Otherwise, a clone of the subtree is reinserted into the DOM. This clone is created from the compiled state. As such, modifications made to the element after compilation (e.g. changing the class) are lost when the element is destroyed.

Whenever the subtree is inserted into the DOM, it always gets a new child scope. This child scope is destroyed when the subtree is removed from the DOM. Refer https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance prototypal inheritance

This has an important implication when ng-model is used inside an ng-if to bind to a javascript primitive defined in the parent scope. In such a situation, any modifications made to the variable in the ng-if subtree will be made on the child scope and override (hide) the value in the parent scope. The parent scope will remain unchanged by changes affected by this subtree.

Note: ng-if differs from ng-show and ng-hide in that ng-if completely removes and recreates the element in the DOM rather than changing its visibility via the display css property. A common case when this difference is significant is when using css selectors that rely on an element's position within the DOM (HTML), such as the :first-child or :last-child pseudo-classes.

Example:

<!-- By using ng-if instead of ng-show, we avoid the cost of the showdown
     filter, the repeater, etc. -->
<div ng-if="showDetails">
   {{obj.details.markdownText | showdown}}
   <div ng-repeat="item in obj.details.items">
     ...
   </div>
</div>

@NgDirective(
   children: NgAnnotation.TRANSCLUDE_CHILDREN,
   selector:'[ng-if]',
   map: const {'.': '=>condition'})
class NgIfDirective extends _NgUnlessIfAttrDirectiveBase {
 NgIfDirective(BoundBlockFactory boundBlockFactory,
                   BlockHole blockHole,
                   Scope scope): super(boundBlockFactory, blockHole, scope);

 set condition(value) =>
     (toBool(value) ? _ensureBlockExists() : _ensureBlockDestroyed());
}