Basic ng-show on div not working

Question

I am just trying to get the ng-show tag working and to test it, I have a hard coded example and even this doesn't work (it is visible when the page loads). Code below.

@{
    ViewBag.Title = "Secure Environment Flex";
}
<div class="row">
    <div class="col-md-12">
        <h3>Secure Environment</h3>
    </div>
</div>
<div ng-controller="SEFlexHomeController" ng-show="false">
    <div >
        <div >
            <ul>
                <li><a href="#tabs-Jobs">Jobs</a></li>
                <li><a href="#tabs-Models">Models</a></li>
                <li><a href="#tabs-Administration">Administration</a></li>
            </ul>
            <div id="tabs-Jobs" >
                <h1>Welcome to this jobs tab</h1>
            </div>
            <div id="tabs-Models">
                <h1>Welcome to this models tab</h1>
            </div>
            <div id="tabs-Administration" >
                <h1>Welcome to this administration tab</h1>
            </div>
        </div>
    </div>
</div>

This is driving me mad, why is it still visible? Could something else in CSS be overriding it and if so how can I tell?

EDIT: Ok I got it working with a basic variable in scope like suggested. Now I'm trying to link it up to the actual action. My code retrieves a list of permissions in the background and once those are retrieved, I want to either display the page or an error depending on if the user is permissioned. Whats bizarre now is that I have two sections, page and error, one with ng-show matching the determination function and one with the negated function. But they are both showing? If I change them both to be just the function "isPermissioned" then the top one shows and the bottom doesn't, so it looks like they are getting different values from the same function. Could this be because one is executing before the other and when the background method updates the permissions, it isn't triggering the data binding?

New HTML is

<div ng-controller="SEFlexHomeController" ng-show="isPermissioned">
    <div class="row" id="TabsSet1">
        <div class="col-md-12">
            <ul>
                <li ng-show="AuthService.canRunFlexJobs || AuthService.canRunHighPriorityFlexJobs"><a href="#tabs-Jobs">Jobs</a></li>
                <li ng-show="AuthService.canViewFlexModels"><a href="#tabs-Models">Models</a></li>
                <li ng-show="AuthService.canAdministerFlex"><a href="#tabs-Administration">Administration</a></li>
            </ul>
            <div id="tabs-Jobs" ng-show="AuthService.canRunFlexJobs || AuthService.canRunHighPriorityFlexJobs">
                <h1>Welcome to this jobs tab</h1>
            </div>
            <div id="tabs-Models" ng-show="AuthService.canViewFlexModels">
                <h1>Welcome to this models tab</h1>
            </div>
            <div id="tabs-Administration" ng-show="AuthService.canAdministerFlex">
                <h1>Welcome to this administration tab</h1>
            </div>
        </div>
    </div>
</div>
<div ng-show="!isPermissioned">
    <h3>You have no permissions to view Secure Environment pages</h3>
</div>

JavaScript

app.controller("SEFlexHomeController", ["$scope", "$http", "$modal", "$log", "$element", "$rootScope", "AlertsService", "AuthService", "SEApplicationService", function ($scope, $http, $modal, $log, $element, $rootScope, AlertsService, AuthService, SEApplicationService) {
        $rootScope.closeAlert = AlertsService.closeAlert;
        $scope.isDataLoading = false;
        $scope.AuthService = AuthService;
        $scope.show = false;

        $scope.isPermissioned = function() {
            return AuthService.canAdministerFlex || AuthService.canViewFlexModels || AuthService.canRunFlexJobs || AuthService.canRunHighPriorityFlexJobs;
        }
    }
]);

Auth service

function AuthService($log, $http) {

    var authService = {
        canRunFlexJobs: false,
        canRunHighPriorityFlexJobs: false,
        canViewFlexModels: false,
        canApproveFlexModels: false,
        canAdministerFlex: false
    };

    authService.getUserClaims = function () {
        $http.post("/Admin/Auth/GetUserClaims")
            .success(function (response, status, headers, config) {
                if (response) {
                    angular.forEach(response.data, function (item) {
                        if (item.Value === "SEFlexJobRunner")
                            authService.canRunFlexJobs = true;
                        if (item.Value === "SEFlexHighPriorityJobRunner")
                            authService.canRunHighPriorityFlexJobs = true;
                        if (item.Value === "SEFlexModelViewer")
                            authService.canViewFlexModels = true;
                        if (item.Value === "SEFlexModelApprover")
                            authService.canApproveFlexModels = true;
                        if (item.Value === "SEFlexAdministrator")
                            authService.canAdministerFlex = true;
                    });
                }
            })
            .error(function (reason, status, headers, config) {
                console.log(reason);
            });

    }
    authService.getUserClaims();
    return authService;
};

Answer 1

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

<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="myValue"></div>

<!-- when $scope.myValue is falsy (element is hidden) -->
<div ng-show="myValue" class="ng-hide"></div>

Answer 2

Well for your given code:

<div ng-controller="SEFlexHomeController" ng-show="show">
    <div >
        <div >
            <ul>
                <li><a href="#tabs-Jobs">Jobs</a></li>
                <li><a href="#tabs-Models">Models</a></li>
                <li><a href="#tabs-Administration">Administration</a></li>
            </ul>
            <div id="tabs-Jobs" >
                <h1>Welcome to this jobs tab</h1>
            </div>
            <div id="tabs-Models">
                <h1>Welcome to this models tab</h1>
            </div>
            <div id="tabs-Administration" >
                <h1>Welcome to this administration tab</h1>
            </div>
        </div>
    </div>
</div>

JS:

myAngularApp.controller('SEFlexHomeController', ['scope', function($scope) {
   $scope.show = false;
   // do stuff here
}]);

Answer 3

I assume you mean it's visible as the page loads and then disappears? If that's the case, you're going to want to also use ng-cloak.

Keep in mind that the css used by ng-cloak isn't available until Angular loads, so most put CSS like this in the header of their document.

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak
{
 display: none !important;
}