title: Disable download button until file download is finished (AngularJS 1.4)
body: <p>in AngularJS 1.4 app we need to disable download button until file download is finished and enable it afterwards. Ideally it should work eve in IE 7 :)</p>
  
  <h2>Page</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button ng-click="downloadFile()"
                              ng-class="inProgressDownloadFile ? 'btn-disabled' : 'btn-enabled'"&gt;
                          &lt;img ng-show="inProgressDownloadFile" src="imgs/ajax-loader.gif"/&gt;
                          &lt;span&gt;Download&lt;/span&gt;
                      &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>Controller</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>$scope.downloadFile = function() {
  if ($scope.inProgressDownloadFile) {
                  return;
              }
  $scope.inProgressDownloadFile = true;
  FileService.downloadFileById($scope.fileId).then(function(response) {
  var blob = new Blob([response.data], {type: "application/vnd.ms-excel.sheet.macroEnabled.12"});
  var url = window.URL || window.webkitURL;
  
                      var downloadLink = angular.element('&lt;a&gt;&lt;/a&gt;');
                      downloadLink.attr('href',url.createObjectURL(blob));
                      downloadLink.attr('target','_self');
                      downloadLink.attr('download', 'invoice.xlsm');
                      downloadLink[0].click();
  }
  $scope.inProgressDownloadExcel = false;
                 }, function(response) {
                      $scope.inProgressDownloadExcel = false;
                 });
  console.log('End of method downloadFile().');
          };</code></pre>
  </div>
  </div>
  </p>
  
  <h2>Service</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>factory.downloadFileById = function(fileId) {
              var httpConfig = {
                   responseType: 'arraybuffer',
                   headers: {
                          'Content-type': 'application/json',
                           'Accept': 'application/vnd.ms-excel.sheet.macroEnabled.12'
                       }
              };
  
              return $http.get(restAppBaseContext + 'restFile/?id=' + fileId, null, httpConfig);
          };</code></pre>
  </div>
  </div>
  </p>
  
  <h2>Problem</h2>
  
  <p>File is downloaded but corrupted! When I open downloaded excel file I get popup message: "We found a problem with some content in invoice.xlsm. Do you want us to try to recover as much as we can? ...". If I click "Yes" I get another popup message: "Excel cannot open the file invoice.xlsm because the file format or file extension is not valid. ...".</p>