ngIf
The ngIf removes the HTML element if the expression evaluates to false. If the expression evaluates to true, a copy of element is added in the DOM.
ngShow/ngHide
The directive shows or hides the HTML element based on the expression provided to ngShow/ngHide attribute.
Difference
ngIf differs from ngShow and ngHide in a way that ngIf completely removes and recreates the element in the DOM rather than changing its visibility via the display css property. The element is shown or hidden by removing or adding the ng-hide CSS class onto the element.
The major catch is the performance difference.
With ngShow leaves the elements alive in the DOM, it means that all of their watch expressions and performance cost are still there even though they are hidden. For views with multiple ngShows you might notice a slight lag in page load time.
One of the solution is to replace ngShow with a ngIf. This will result in considerable improvements in the responsiveness of application or page load because those extra watches are no longer happening.
Reference:
https://docs.angularjs.org/api/ng/directive/ngIf
https://docs.angularjs.org/api/ng/directive/ngShow