AngularJS ng-if doesn't show the DIV

Question

Why my app isn't working properly? It must show one (one at time) of the div on the bottom with the "ng-if" tag.. This is the fiddle:

Fiddle

<div class="fix" ng-if="showAdd()">
  <button type="button" class="btn btn-link">
    <span class="glyphicon glyphicon-plus"></span>
    <span class="fix">Aggiungi un Preferito</span>
  </button>
  <div class="add">
  Aggiungi un Preferito
  </div>
</div>
<div class="edit" ng-if="showEdit()">
Modifica
</div>

Answer 1

It looks like there's a mistake in your fiddle. The edit div will show up if you change your showAdd and showEdit methods to the following:

function showAdd() {
    return $scope.addBookmark && !$scope.editBookmark;
}

function showEdit() {
    return $scope.editBookmark && !$scope.addBookmark;
}

The add div never gets added because that would be activated by the startAdd function, which isn't called anywhere.

Also, please post your javascript code here. That way, if something happens to your fiddle, this question might still be useful to others.

EDIT:

To get your add button to work you need to change this:

<div class="fix" ng-if="showAdd()">
  <button type="button" class="btn btn-link">
    <span class="glyphicon glyphicon-plus"></span>
    <span class="fix">Aggiungi un Preferito</span>
  </button>
  <div class="add">
  Aggiungi un Preferito
  </div>
</div>

To this:

<button type="button" class="btn btn-link" ng-click="startAdd()">
    <span class="glyphicon glyphicon-plus"></span>
    <span class="fix">Aggiungi un Preferito</span>
  </button>
<div class="fix" ng-if="showAdd()">
  <div class="add">
  Aggiungi un Preferito
  </div>
</div>