What is the difference between ng-if, ng-show and ng-hide in AngularJS?
Quick Answer
ng-if adds or removes the element from the DOM entirely (and creates/destroys a child scope and its watchers). ng-show/ng-hide just toggle display: none — the element and its watchers stay. Use ng-if for expensive or rarely-shown content, ng-show for frequently toggled content.
ng-if genuinely takes the element out of the DOM when the condition is false, and that also tears down its child scope and all the watchers inside it, which helps digest performance. ng-show and ng-hide just flip a display: none style, so everything stays in the DOM and keeps being watched. So a big section that's usually hidden should be ng-if; a small thing you toggle constantly should be ng-show. Just remember ng-if makes a new child scope.
ng-ifremoving watchers matters for digest performance on a big page.ng-ifcreates a new child scope — a gotcha if you bind a primitive inside it.ng-switchis the multi-branch version ofng-if.