Angular Directives: if, show, hide

Sometimes HTML elements will be included or excluded from the view depending on a condition within the model.  There are three Angular directives that can be used in that situation:

• ng-if will include an element if a condition is met
• ng-show will display an element if a condition is met.  If the condition is not met, the element will be included in the DOM, but it will be hidden.
• ng-hide will hide an element if a condition is met.

<div ng-controller="mainController">
        <div>
            <input type="text" ng-model="someVariable" />
        </div>

        <div ng-if="someVariable.length == characters">
            IF: 5 characters!
        </div>
        <div ng-show="someVariable.length < characters">
            SHOW: less than 5 characters!
        </div>
        <div ng-hide="someVariable.length <= characters">
            HIDE: more than 5 characters!
        </div>
</div>