Doubt with ng-if or ng-hide AngularJS

The ng-hide directive hides the element depending on the result of the expression that is specified in the attribute.

Example:

<button ng-hide="esconderBotao">Botao 1</button>

If the variable esconderBotao is declared in scope and is TRUE (or something equivalent) the button will be hidden (the .ng-hide class is added to the element).

Another example:

angular.module('App', [])
.controller('ExemploController', ['$scope', function($scope) {
  $scope.esconderBotao1 = false;

  $scope.botao1 = function() {
    alert('Ok!');
  }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="App">
  <div ng-controller="ExemploController">
    <button ng-click="botao1()" ng-hide="esconderBotao1">Botao 1</button>
    <br /><br />
    <button ng-click="esconderBotao1 = true" ng-show="!esconderBotao1">Esconder botão 1</button>
    <button ng-click="esconderBotao1 = false" ng-show="esconderBotao1">Mostrar botão 1</button>
  </div>
</div>

In the example above, when you click the "Hide" button, the variable esconderBotao1 (see ng-click) is set to TRUE and button 1 is hidden automatically. By clicking the "Show" button the esconderBotao1 variable is set to FALSE and button 1 is automatically displayed.

Note: If you do not set a value for the variable in scope, the ng-hide element will not hide the element by default.

The ng-if is not meant to hide the div but rather delete the code when opening the page, if false will delete the given code. >

The right thing is to use ng-show and ng-hide to show and hide, eg:

<div ng-app="app">
<div ng-controller="MainController">
    <button ng-click="mostrar=!mostrar">Ação</button>
        <div ng-show="mostrar">
             <h3>Hello Word</h3>
        </div>
</div>

angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
       $scope.mostrar = false;
}]);

JSFiddle