Angular ng-show doesn't work properly when value changes

Question

I'm trying to show div depends on permission of log in user.

<div class="container">
    <p> {{permission}}</p>
    <div ng-show="permission" class="admin_panel">
      ....
    </div>
</div>

and in controller, it is set:

$scope.init = function(){

    if($window.sessionStorage.isAdmin){
      $scope.permission = $window.sessionStorage.isAdmin;
    }
    $log.info("are you admin??? " + $scope.permission);
};
$scope.init();

In console, I could verify that permission was set to false and {{permission}} also showed its value is false. However, ng-show is still showing even though the value is false. I'm not sure what's wrong with this.

Answer 1

I had a similar problem except that my variable was changed inside a timeout function like this:

<div ng-show="check"> something .... </div>    

setTimeout(function(){
   check = false;
   },500);

the problem was solved when i added $scope.$apply() inside timeout:

setTimeout(function(){
   check = false;
   $scope.$apply()
   },500);

Answer 2

If you want to show or hide some content that depends of the user permissions, instead of using "ng-show", you should use "ng-if".

ng-show/ng-hide only adds or remove a CSS class that show or hide that element (display:none), but an user could change it easily in the browser.

Using ng-if: "If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM."

https://docs.angularjs.org/api/ng/directive/ngIf