what is the difference between ng-if and ng-show/ng-hide

The ngif directive remove or recreate a portion of the DOM tree based on the expression. If the expression is false then the element is removed from the DOM. If the expression is true a clone of the element is reinserted into the DOM.

<div ng-if=”1”></div>

<div ng-if=”0”></div>

When an element is removed using ng-if the scope is destroyed. The new scope is created when the element is restored. The scope is created within ng-if inherits from parent scope

If you using ng-model is used within ng-if to the data from parent scope, if any changed happen from parent scope nothing will affect child scope. 

ng-show / ng-hide does not remove the elements from DOM. It uses CSS style to hide/show element ( don’t need to add own class).

ng-if create a child scope when the condition is true. The ng-show/ng-hide does not create any child scope. 

<div ng-show=”1”></div>

<div ng-hide=”1”></div>