I attempted to modify the ng-model value after making an $http.get call, but it does not reflect the update.
Below is my code snippet:
main.js
angular.module('app', [])
.controller('mainCtrl', ['$http', function($http) {
var main = this;
main.show = true;
$http({
method: 'GET',
url: 'api url'
})
.then(function(res) {
main.show = true;
console.log('Successful call, main.show: ' + main.show);
}, function(res) {
main.show = false;
console.log('Failed call, main.show: ' + main.show);
});
console.log('Outside of call, main.show: ' + main.show);
}]);
index.html
...
<body ng-app='app' ng-controller='mainCtrl as main'>
<a ng-show='main.show' href='/'>Success</a>
<a ng-hide='main.show' href='/'>Failure</a>
</body>
...
Console log when API call succeeds:
Outside of call, main.show: true
Successful call, main.show: true
Console log when API call fails:
Outside of call, main.show: true
Failed call, main.show: false
The issue I'm facing is that the HTML always displays the 'Success' link.
I have tried various methods like using $timeout, $apply, but none seem to work.
Although there are solutions available for similar issues, they haven't proven effective in my case.
How can I resolve this problem?