angularjs - angularjsで更新値を同期する方法

Question

私はAngularにかなり慣れていないので、ここに行きます。アップロードされたアバターと、アップロードされたアバターの画像を表示するサムネイルがあります。私の問題は、新しくアップロードされたアバターのサムネイルを更新する方法です。今のところ、変更を確認するには、まずページを更新する必要があります。

ここに私のコントローラーのいくつかのコードがあります:

//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);
            })
        };  
    }
};

そして私のパーシャルで

<div id="show-avatar" class="col-sm-3 col-sm-offset-3">
    <img id="avatarbox" ng-src="{{avatarImage}}" >
</div>

上記のコントローラー コードでは、選択した画像が 25kb を超えない場合に最初に検証し、アップロード ボタンを表示します。アバターをアップロードする方法に関するコードを含めたので、問題が解決する可能性があります。