The HTML code snippet I have is as follows:
<body ng-controller = "Control as control">
<button ng-click = "control.prepareAction()">Do Action </button>
<div id="one" ng-hide = "!control.showOne" >
<div>
<h6> {{control.name}}</h6>
<p> Bills Sponsored: {{control.count}} <p>
</div>
</body>
In the Javascript part of my code:
var vm = this;
vm.name = "My Name"
vm.prepareAction = function(){
action(parseFirst(), parseLast()); //The two parse functions extract values from an HTML form. This part is functioning correctly.
}
function action(first, last) {
$.post('php/one.php', {
first: first,
last: last
},
function(data) {
create(JSON.parse(data));
});
return values;
}
function create(data) {
var countArray = data[0];
vm.count = countArray[0];
vm.showOne = true;
}
The issue I am facing is that the function does not update the values of showOne (the div remains hidden) or count (it displays as blank when ng-hide is set to false) in the HTML. Despite checking the value of `vm` on the console and using the Chrome ng-inspector Extension, it seems that the values for showOne and count are correct. This leads me to believe that there might be a scope-related problem causing this inconsistency.