Boolean variables in Angular with ng-show, not being set initially

Question

For a specific dropdown menu I'd like to show different options based on booleans in my app. I've set everyhting up and things SORTA work, but the DOM isn't updating correctly to show the values in the dropdown. The console.logs I use to check the code output the corrects values for my variables, and when I refresh the page, the dropdown is filled just fine.

$scope.login = function () {
    var loginUrl = url;

    $server.post(loginUrl, $scope.user)
        .then(function(response) {
            var data = response.data;

            if(data.status == 'OK') {
                //some things here that work fine
                $scope.getRights();
            } else {
                $scope.user.password = '';
            }
        }
};

$scope.getRights = function() {
    console.log("yo");
    $scope.boolA = false;
    $scope.boolB = false;
    $scope.boolC = false;
    $scope.boolD = false;

    $scope.permissions.forEach(function (right) {
        console.log(right);
        switch(right) {
            case "A":
                $scope.boolA = true;
                break;
            case "B":
                $scope.boolB = true;
                break;
            case "C":
                $scope.boolC = true;
                break;
            case "D":
                $scope.boolD = true;
                break;
        }
    });
    console.log($scope.boolA + " " + $scope.boolB + " " + $scope.boolC + " " + $scope.boolD);
};

With matching html, correct controller is defined in an above lying <div>.

<ul class="dropdown-menu" uib-dropdown-menu role="menu">
    <li role="menuitem" ng-show="boolA"><a href="#/start">
        Option A
    </a></li>
    <li role="menuitem" ng-show="boolB"><a href>
        Option B
    </a></li>
    <li role="menuitem" ng-show="boolC"><a href>
        Option C
    </a></li>
    <li role="menuitem" ng-show="boolD"><a href>
        Option D
    </a></li>
</ul>

The json in $scope.permissions is ["A","B","D"]

My console.log outputs: true true false true

If I check the $scope variables in the browser, they're not set, and the dropdown options all have ng-hide active. When I refresh the page, they show up in the $scope inspector, and my dropdown has the correct values. So it looks like there's either a synch/asynch problem, or I'm using the incorrect route to set these variables.

Simply making them global doesn't change anything. A "simple" fix would be to force a reload after successfully loggin in, but this does not feel like "the angular way". I'm quite sure I'm just making a beginners mistake here. Can anyone help me in identifying where this mistake lies?

Answer 1

Instead of doing that can you not simply convert your "permissions" array into the menu item's list? That way the users won't be able to see the options in the html.

$scope.getRights = function() {
$scope.permissions = ["A", "B", "D"];
$scope.menuItems = [];
$scope.permissions.forEach(function(val) {
  $scope.menuItems.push({
    title: val
  });
});

}

<ul role="menu">
<li role="menuitem" ng-repeat="item in menuItems">
  <a>Option {{item.title}}</a>
</li>

Check this plunkr

Update

In this case your DOM is most likely not being updated because of an issue related to this post which suggests using $apply():

$scope.$apply(function(){
        $scope.boolA = false;
    });

Also, make sure you take a look on Danny Bullis comment:

Use $q.defer(); the object returned allows you to call a .resolve() or .reject() method once your async method is completed. Both resolve and reject methods of the $q.defer() object call $digest internally after the async method is resolved. The $digest tells angular to re-evaluate your $scope properties, which will do what you're looking for. It's a better practice. Avoid calling $apply() if you don't need to and if there are better, built-in angular mechanisms in place to take care of this.