Ошибка “$apply already in progress” в событии FileReader.onloadstart

var app = angular.module('app', []); 
 
app.controller('downloadCtrl', function($scope) { 
  $scope.stages = []; 
  $scope.download = function() { 
    let file = new Blob(["Sample text data"]); 
    let fileReader = new FileReader(); 
    fileReader.onloadstart = function() { 
      console.log("onloadstart"); 
      $scope.stages.push('onloadstart'); 
      $scope.$apply(); 
    }; 
    fileReader.onload = function() { 
      console.log("onload"); 
      $scope.stages.push('onload'); 
      $scope.$apply(); 
    }; 
    fileReader.onprogress = function(event) { 
      console.log("onprogress"); 
      $scope.stages.push('onprogress'); 
      $scope.$apply(); 
    }; 
    fileReader.readAsArrayBuffer(file); 
  }; 
}); 
app.directive('download', function($http) { 
  return { 
    restrict: 'EA', 
    template: `<button ng-click="download()"> 
    						Download 
               </button> 
              <div ng-repeat="stage in stages track by $index">{{stage}}</div>`, 
    scope: {}, 
    controller: 'downloadCtrl', 
  }; 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<div ng-app="app"> 
  <download></download> 
</div>

var app = angular.module('app', []); 
 
app.controller('downloadCtrl', function($scope) { 
  $scope.stages = []; 
 
  function printStack(note) { 
    console.log((new Error("printStack: " + note)).stack.toString()); 
  } 
  $scope.download = function() { 
    let file = new Blob(["Sample text data"]); 
    let fileReader = new FileReader(); 
    printStack('sync'); 
    fileReader.onloadstart = function() { 
      console.log("onloadstart"); 
      $scope.stages.push('onloadstart'); 
      printStack('async'); 
      //$scope.$apply(); 
    }; 
    fileReader.onload = function() { 
      console.log("onload"); 
      $scope.stages.push('onload'); 
      printStack('async'); 
      $scope.$apply(); 
    }; 
    fileReader.onprogress = function(event) { 
      console.log("onprogress", event); 
      $scope.stages.push('onprogress'); 
      printStack('async'); 
      $scope.$apply(); 
    }; 
    fileReader.readAsArrayBuffer(file); 
  }; 
}); 
app.directive('download', function($http) { 
  return { 
    restrict: 'EA', 
    template: `<button ng-click="download()"> 
    						Download 
               </button> 
              <div ng-repeat="stage in stages track by $index">{{stage}}</div>`, 
    scope: {}, 
    controller: 'downloadCtrl', 
  }; 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<div ng-app="app"> 
  <download></download> 
</div>