button text not updating from controller function in AngularJS - angularjs

Question

I'm trying to change the text of a button to "Loading" while an api request is processing within AngularJS. I use a scope variable of buttontext. I noticed the variable gets updated in the browser developer console but doesn't get updated in the ng-inspector panel in Chrome. I can't figure out why the button text doesn't change. I figure it has to do with the fact the corresponding variable is inside a controller function. Here's my AngularJS code:
angular.module('twitterApp', ['ngResource'])
.controller('mainController', function($scope, TwitterUser, KloutUser) {
$scope.buttontext = "Get Insight";
$scope.error = false;
$scope.users = [];
$scope.getResult = function(id){
$scope.users = [];
$scope.buttontext = "Loading";
$scope.loading = true;
TwitterUser.get({
id: id
}, function(user) {
if(user.error) {
$scope.error = true;
$scope.message = "Validation Error please fill the user_id or screen_name field";
}else{
if(!user.errors){
console.log(user);
$scope.users.push(user);
$scope.error = false;
}else{
$scope.error = true;
$scope.message = user.errors[0]['message']+" - "+user.errors[0]['code'] ;
}
}
}).$promise.then(function(user){
KloutUser.get({
id: user.id
}, function(userkloutscore) {
if(!userkloutscore) {
console.log('An error occurred. No Klout score returned.');
}else{
$scope.kloutscore = userkloutscore.score;
var score_stringified = JSON.stringify(userkloutscore);
console.log('The Klout API response: ' + score_stringified);
}
});
});
$scope.buttontext = "Get Insight";
};
$scope.removeUser = function(index){
$scope.users.splice(index, 1);
};
});
And here's the button HTML:
<a class="btn btn-primary" role="button" ng-click="getResult(id)">{{ buttontext }}</a>

Answer 1

You need to put
$scope.buttontext = "Get Insight";
Inside the promise callback, because at this moment your flow is:
Change text to "Loading"
Make the API request (and wait in background)
Change text to "Get Insight" inmediately
So your text makes the change from "Get Insight" -> "Loading" -> "Get Insight" so rapidly that it goes unnoticed.

Answer 2

Move the last line to inside your callback/promise logic, like:
angular.module('twitterApp', ['ngResource'])
.controller('mainController', function($scope, TwitterUser, KloutUser) {
$scope.buttontext = "Get Insight";
$scope.error = false;
$scope.users = [];
$scope.getResult = function(id){
$scope.users = [];
$scope.buttontext = "Loading";
$scope.loading = true;
TwitterUser.get({
id: id
}, function(user) {
if(user.error) {
$scope.error = true;
$scope.message = "Validation Error please fill the user_id or screen_name field";
}else{
if(!user.errors){
console.log(user);
$scope.users.push(user);
$scope.error = false;
}else{
$scope.error = true;
$scope.message = user.errors[0]['message']+" - "+user.errors[0]['code'] ;
}
}
}).$promise.then(function(user){
KloutUser.get({
id: user.id
}, function(userkloutscore) {
if(!userkloutscore) {
console.log('An error occurred. No Klout score returned.');
}else{
$scope.kloutscore = userkloutscore.score;
var score_stringified = JSON.stringify(userkloutscore);
console.log('The Klout API response: ' + score_stringified);
}
$scope.buttontext = "Get Insight";
});
});
};
$scope.removeUser = function(index){
$scope.users.splice(index, 1);
};
});
But you still need to handle some error scenarios.