Can't get ng-show to show a div after the div's ng-click has hidden it

Question

My hmtl code from my view looks like this:

<div ng-show="show_alert_message" ng-bind-html="alert_message"
     class="alert-message-container"
     ng-click="show_alert_message=!show_alert_message"></div>

I show the div initially by doing this in the view's controller:

$scope.show_alert_message = true;

The user clicks on the div to close it causing the ng-click to make show_message_alert false. This works great, hiding the div. But if I try to show the div again by running the command again in the controller it doesn't show:

$scope.show_alert_message = true;

It seems as if the ng-click had stopped it being possible to show the div again.

Am I doing something wrong? The scope for the controller $scope.show_alert_message = true; should be identical to the scope of the ng-click="show_alert_message=false" so I can't see why the second $scope.show_alert_message = true; doesn't work whereas the first one does.

Answer 1

I made a snipet and it is working as you wish. Look at your scope to see which scope are you using when you run $scope.show_alert_message = true; . I think this is the place to be fixed.

 var $scope = {}; var myApp = angular.module('myApp', []); myApp.controller('ngShowCtrl', ['$scope', function($scope){ $scope.show_alert_message = true; $scope.alert_message = "I'm an alert message!" }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="ngShowCtrl"> <div ng-show="show_alert_message" ng-bind="alert_message" class="alert-message-container" ng-click="show_alert_message=!show_alert_message" ></div> <button type="button" ng-click="show_alert_message=!show_alert_message">Show/Hide</button> </div> 

Answer 2

use ng-if="show_alert_message" and ng-click="toggle()" and

$scope.toggle=function(){
  setTimeout(function(){
      $scope.show_alert_message=! $scope.show_alert_message;
      //$scope.$apply();
  },0);

}