The ng-show Directive

The ng-show and ng-hide directives control element visibility based on a boolean expression.

ng-show

Shows an element when the expression is true:

<div ng-app="" ng-init="visible=true">
    <button ng-click="visible = !visible">Toggle</button>
    <p ng-show="visible">This paragraph is visible!</p>
</div>

ng-hide

Hides an element when the expression is true:

<p ng-hide="hidden">This is visible by default</p>
<button ng-click="hidden = true">Hide it</button>

Practical Example

app.controller('UserCtrl', function($scope) {
    $scope.users = ['Alice', 'Bob', 'Charlie'];
    $scope.showList = true;
});

<div ng-controller="UserCtrl">
    <button ng-click="showList = !showList">
        {{ showList ? 'Hide' : 'Show' }} Users
    </button>

    <ul ng-show="showList">
        <li ng-repeat="user in users">{{ user }}</li>
    </ul>

    <p ng-show="users.length === 0">No users found.</p>
</div>

ng-show vs ng-if

• ng-show — hides with display: none, element stays in DOM
• ng-if — completely removes the element from the DOM

Use ng-show for frequently toggled elements. Use ng-if for elements that rarely change or contain heavy content.