单击按钮时无法显示旋转图标

Question

以下代码从后端获取数据，并在页面加载时在浏览器上显示。当用户单击“重新加载数据”按钮时，它必须再次从后端获取数据并在浏览器上显示。问题是，当用户点击重新加载数据按钮时，我需要显示旋转图标，一旦数据加载，它将被数据替换。随着下面的代码旋转图标显示在页面的某个地方，它仍然占据$ scope.html的空间，旧的数据但显示为空白，在空白空间后显示spinner。如何尽快显示微调器当用户点击重新加载数据按钮？

<table style="width:100%;height:80%;" ng-controller="loadingSampleCtrl">
<tr> <td><button type="button" ng-click="loadData()">Reload data</button></td></tr>
<tr ng-show="loading"> <td colspan="5" style="white-space: nowrap;text-align: center; font-size:36px;"><div class="loader"><i class="fa fa-spinner fa-spin" ></i> Loading<span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span></div></td></tr>
         <object-reloadable></object-reloadable>
 </table>

js code：

app.directive('objectReloadable', function() {
var link = function(scope, element, attrs) {
var currentElement = element;

scope.$watch('pdfName', function(newValue, oldValue) {
 if (newValue !== oldValue) {
     scope.loading = false;
     scope.pdfName = newValue;
      if(scope.pdfName.filePath == "undefined" ||  scope.pdfName.filePath==null){
scope.loading=true;
} else {
alert("in else");
scope.html = '<object style="width: 100%; height: 1200px;overflow-y: hidden; cursor:pointer;" type="application/pdf" data="' + scope.pdfName.filePath + '" ></object>';
/* scope.pdfName = newValue;*/
scope.loading=false;

}var replacementElement = angular.element(scope.html);
    currentElement.replaceWith(replacementElement);
    currentElement = replacementElement;
}
});
};
return {
restrict: 'E',
scope: false,
link: link
};
})

myApp.controller('loadingSampleCtrl', function ($scope, FilesService) {
$scope.loadData = function () {
$scope.loading = true;
$scope.html='';
FilesService.fileRead().then(
function (response) {
     $scope.filePathAndName = response;
       if(window.navigator.msSaveOrOpenBlob){
    $scope.IEBrowser = true;
    $timeout(function() {
        $scope.pdfName = response;
       }, 0);
    } else {
    $scope.IEBrowser = false;
    $scope.filePathAndName = response;
     $scope.loading = false;
     }
},
function (errResponse) {
    $rootScope.showError("Internal error" + errResponse);
});

}
$scope.loadData();
});
//service call
_myFileServiceFactory.fileRead= function(){
var deferred = $q.defer();
var repUrl = appURL+'/myFilesData/generateDefectsSummaryPDF.form';
$http.get(repUrl).then(
    function (response) {
        deferred.resolve(response.data);
    },
    function(errResponse){
        console.error('Error ' + errResponse);
        deferred.reject(errResponse);
    }
);
return deferred.promise;
}

PS：我已经在需要的地方分配了scope.html=''，但是当用户点击“重新加载”按钮时，它仍然显示空白区域，然后向下显示旋转图标。