Angularjs 角度显示<；img src={temp}}值更改后不重新加载

我有一个表格，其中有一些输入，如下所示：

    <form>
        <input type="file"
            onchange="angular.element(this).scope().PreviewFile()"
            id="avatar" name="avatar"
            accept="image/png, image/jpeg">
        </div>
        <div id="reuseImage">
            <p>This image will be reused in avatar</p>
            <img class="image-thumbnail" src="{{avatar.avatarImage}}" alt="Image" />
        </div>
        <div class="form-group">
            <label>dressCodeName</label>
            <input type="text" ng-model="avatar.avatarName" class="form-control" />
        </div>
        <div class="form-group">
            <label>delayForProcessingInSeconds</label>
            <input type="number" ng-model="avatar.delayForProcessingInSeconds" class="form-control" />
        </div>
        <div class="form-group">
            <input type="button" class="btn btn-primary" ng-click="Savedata()" value="{{btntext}}" />
            <input type="button" class="btn btn-info" ng-click="Send()" value="{{btntextSend}}" />
        </div>
    </form>

图像不会不稳定地显示在将其添加到场化身后，必须对角度值执行一些其他操作（例如，在任何其他场上写一个字母）以使图像显示，有人知道它的修复方法吗

    $scope.PreviewFile = function () {
        var file = document.querySelector('input[type=file]').files[0];
        var reader = new FileReader();

    reader.onloadend = function () {
         $scope.avatar.avatarImage = reader.result;
        }

        if (file) {
            reader.readAsDataURL(file);
        } else {
            $scope.avatar.avatarImage = "";
        }
    };