$ apply不在onchange调用中工作

Question

我有一个文件上传工作，我正在尝试添加一个微调器图标，以显示该文件被放入内存。表单保存/提交按钮被禁用，直到文件完全在内存中。现在我让微调器工作，但它打破了我的按钮禁用

之前的HTML：

<div class="form-group">
    <label class="col-xs-12 col-sm-4">Image <span class="required_field">*</span>:</label>
    <input class="input-dnld" id="loadImg" type='file' placeholder="Select an image to upload" name="topoImg" onchange="angular.element(this).scope().readimg(this)" accept="image/*" required>
    <label for="loadImg" required><span class="glyphicon glyphicon-open glyph-style"></span>Select an image to upload</label>
</div>

...

<button ng-click="saveTopo()" ng-disabled="frmNode.$invalid || !image" class="btn btn-default action_btn_style">Save</button>

当前HTML：

<div class="form-group">
    <label class="col-xs-12 col-sm-4">Image <span class="required_field">*</span>:</label>
    <input class="input-dnld" id="loadImg" type='file' placeholder="Select an image to upload" name="topoImg" onchange="angular.element(this).scope().readimg(this)" accept="image/*" required>
    <label for="loadImg" required><span class="glyphicon glyphicon-open glyph-style"></span>Select an image to upload</label>
</div>
<span style="width: 30px">
    <i class="fa fa-fw fa-lg fa-spinner fa-pulse" ng-show="imgupload"></i>
</span>

...

<button ng-click="save()" ng-disabled="frmNode.$invalid || imgupload ||  !image" class="btn btn-default action_btn_style">Save</button>

以前的JS函数：

$scope.readimg = function(ele) {
    $scope.image = ele.files[0];
}

当前的JS功能：

 $scope.readimg = function(ele) {
    $scope.imgupload = true;
    $scope.$apply();
    $scope.image = ele.files[0];
    $scope.imgupload = false;
    $scope.$apply();
} 

我添加了$ apply和一个布尔变量来显示图片正在上传。在添加$ apply之前，函数中的布尔值没有被更改，直到函数返回为止。添加$ apply后，微调器会显示，但在微调器消失之前很久就会启用该按钮。我尝试使用布尔值修改条件语句，但它似乎没有更新。由于在angularjs中缺少对文件类型字段的ng-change支持，而且我是web dev的初学者，我正在摸不着如何使这个工作。