ng-show does not appear to work with global variables

I'm trying to display the contents of a div based on the response from an $http service. The AJAX call works fine and is not the issue here. However, I am unable to update the controller variable that I would like (intFlag) to obtain the desired behavior. I thought creating a global variable would resolve the issue even though I didn't want to do that.

Here is a similar question: (AngularJS : ng-show usage), but the solution, which I've seen in many other places, does not seem to work for me. This seems like a fairly standard procedure. Initially, I thought it was just a scope issue, but even the global variable attempt isn't working. This may be because the view doesn't update in response to changes in global variables. I'm still learning Angular.

<html ng-app="myapp">
<head>
<script type="text/javascript">
var intFlag = 0; 

var app = angular.module('myapp', []);
app.controller('AController', function ($scope, $http) 
{   //I've tried: var this.intFlag = 0; here already
    this.CreateUser=function()
    {   //scope changes here, right?
        $http({
        method: 'POST',
        url: 'some url', //pseudocode
        data: someData, //pseudocode
        headers: { 'Content-Type': 'application/x-www-form-urlencoded'} 
        }).then(function successCallback(response) 
            {   intFlag = 1; //global variable
                //Ideally I want to update a variable that is in the scope for the controller
            }, function errorCallback(response) {
        });
    };
});

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

</head>
<body ng-controller="AController as Ctrl">

<div>
<button type="button" ng-click="Ctrl.CreateUser()" >Create User</button>
<div ng-show="intFlag === 1">
    <p>Congratulations!</p>
</div>
</div>
</body>
</html>

Solution

You need to add that variable to controller context(this) as you are using controllerAs then use it with controller alias like Ctrl.intFlag. Additionally I'd say that remove $scope dependency from controller which doesn't make sense to mix $scope & this together.

Markup

ng-show="Ctrl.intFlag"

Code

var app = angular.module('myapp', []);
app.controller('AController', function ($http) 
{
    var self = this;
    self.intFlag = intFlag;
    self.CreateUser=function()
    {   //scope changes here, right?
        $http({
        method: 'POST',
        url: 'some url', //pseudocode
        data: someData, //pseudocode
        headers: { 'Content-Type': 'application/x-www-form-urlencoded'} 
        }).then(function successCallback(response) 
            {   self.intFlag = 1;//global variable
                //Ideally I want to update a variable that is in the scope for the controller
            }, function errorCallback(response) {
        });
    };
});