I am trying to display a div based on the results of $http POST. The POST request resolves as expected, but I am unable to update the controller variable UserCreatedFlag. I'm pretty sure this is a scope issue, and I've read several articles on the topic, but I'm missing something.
<html ng-app="registeruser">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script type="text/javascript" >
(function()
{ var app = angular.module('registeruser', []);
app.controller('RegisterUserController', function ($scope, $http)
{
this.ActiveDiv = 5;
this.UserCreatedFlag = 0;
this.CreateUser=function()
{
$http({
method: 'POST',
url: '/AjaxFunctions.php?Function=CreateUser',
data: "",
headers: { 'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function successCallback(response)
{ if(response.data == "Success")
this.UserCreatedFlag = 1;
}, function errorCallback(response) {
});
};
});
})();
</script>
</head>
<body ng-controller="RegisterUserController as RegUserCtrl">
<div ng-show="RegUserCtrl.ActiveDiv === 5">
<div >
<button name="btnUserRevewSubmit" type="button" ng-click="RegUserCtrl.CreateUser()">Create User</button>
</div>
<div ng-show="RegUserCtrl.UserCreatedFlag === 1">
Some Message
</div>
</div>
</body>
</html>
