Angular ng-click works only once

Question

I need to switch between to div's. Div class="wrapper" must be visible by default. Div class="form" must be shown after admin approve. The problem is when i click on <a ng-click="toggle()"> it works only once, and no reaction after. If i will add some ng-hide to 'wrapper', ng-click works, but show/hide only 'form'. <a> must be shown after controller response, like class="form".

HTML:

<div class="body" ng-class="{'show': show && showTemp}">
        <a ng-click="toggle()"></a>
        <div class="form"></div>
        <div class="wrapper"></div>
</div>

CSS:

.form {
    display: none;
}

.wrapper {
    display: block;
}

.show .form {
    display: block;
}

.show .wrapper {
    display: none;
}

Controller:

 $scope.show = false;
 $scope.showTemp = true;


 // response from admin
 $scope.$on('$show', function(e,data) {
                $scope.show = true;
                $scope.available = data;
            });


    // this click by user
    $scope.toggle = function() {
            $scope.showTemp = !$scope.showTemp;
        };

Answer 1

Why can't you do something simpler like:

<div class="body" ng-init="showForm = false">
        <a ng-click="showForm = available && ? false : !showForm">Click</a>
        <div class="form" ng-show="showForm"></div>
        <div class="wrapper" ng-hide="showForm"></div>
</div>

By using ngInit I'm setting a default value to showForm to false (You can do it from the controller as-well ($scope.showForm = false;) and then I toggle the ng-hide class (Which is found in angular.css any simply defined as .ng-hide {display: none;}) to show/hide the form and the wrapper DIVs.

When you click on the button the following condition is evaluated: showForm = available && ? false : !showForm - The showForm will always be hidden if there is no data available, and if there is data avalable, it will toggle between the form and the wrapper.

You can also add ng-show="available" to the button so it's only visible once there's data, because before it does nothing. A working example:

angular.module('app',[]).controller('ctrl', function($scope) {
  $scope.setData = function(data) {
    $scope.available = data;
    $scope.showForm  = true;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
<div class="body" ng-init="showForm = false">
        <a ng-show="available" ng-click="showForm = !showForm">Click</a>
        <br>
        <div class="form" ng-show="showForm">THIS IS THE FORM<br>{{available | json}}</div>
        <div class="wrapper" ng-hide="showForm">THIS IS THE WRAPPER</div>
  
  <button ng-hide="available" ng-click="setData({val: 'test'})">SET MOCK DATA</button>
</div>
  </div>