How to sync update value in angularjs - angularjs

Question

I'm pretty new to angular so here goes. I have an upload avatar and a thumbnail to show the image of the uploaded avatar. My problem is how to update the thumbnail of the newly uploaded avatar. Coz as of right now I would have to refresh the page first before I can see the changes.
Here's some code in my controller:
//get avatar
$scope.userAvatar = function() {
Api.getAvatar($scope.security.currentUser.email)
.then(function(result) {
//success
$scope.avatarImage = result.config.url;
}, function(result) {
//errors
console.log(result);
});
}
//validate avatar then upload avatar
$scope.validateAvatar = function(files) {
var fd = new FormData();
if(files.length > 0)
{
$scope.filesize = files[0].size;
$scope.filemaxsize = 25 * 1024;
$scope.$apply();
//Take the first selected file
fd.append("avatarImage", files[0]);
$scope.uploadAvatar = function() {
Api.uploadAvatar($scope.security.currentUser.email, fd)
.then(function(result) {
console.log(result.data);
//$scope.avatarImage = result.config.url; ////doesn't update the $scope.avatarImage
//$scope.userAvatar(); //doesn't update the $scope.avatarImage
Api.getAvatar($scope.security.currentUser.email)
.then(function(result) {
//success
console.log('uploaded Image');
$scope.avatarImage = result.config.url;
});
}, function(result) {
console.log(result);
})
};
}
};
and on my partials
<div id="show-avatar" class="col-sm-3 col-sm-offset-3">
<img id="avatarbox" ng-src="{{avatarImage}}" >
</div>
On my controller code above I validate the chosen image first if its not more than 25kb I show the upload button. I included the code on how I upload my avatar maybe it may help on my problem.

Answer 1

okay, i solved my own problem with the below code.
$scope.validateAvatar = function(files) {
var fd = new FormData();
if(files.length > 0)
{
$scope.filesize = files[0].size;
$scope.filemaxsize = 25 * 1024;
$scope.avatarImage = '';
//Take the first selected file
fd.append("avatarImage", files[0]);
$scope.uploadAvatar = function() {
Api.uploadAvatar($scope.security.currentUser.email, fd)
.then(function(result) {
$scope.userAvatar();
}, function(result) {
console.log(result);
})
};
$scope.$apply();
}
};
I reset the $scope.avatarImage then assign it again using the $scope.userAvatar();.