Force angular.element .on 'change' to call specified function on the same file

Question

When I select say hello.png the first time, it loads it and calls handleFileSelect() function. However, if I pick the same file again, the function won't get called until I pick another filename. How can I force it to call the function? I was thinking that the modification would be on the 'change' but not sure what event would that be.

var handleFileSelect = function(evt) {
  debugger;
  var file = evt.currentTarget.files[0];
  var reader = new FileReader();
  reader.onload = function (evt) {
    $scope.$apply(function($scope){
      $scope.myImage = evt.target.result;
    });
  };
  reader.readAsDataURL(file);
};

angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);

Answer 1

The best way I can think of is to replace the file input with a button and create the input dynamically when the button is pressed.

function handleFileSelect(evt) {
  alert('Filename: ' + evt.target.files[0].name);
}

var button = document.getElementById('select-file');
button.addEventListener('click', function() {
  var input = document.createElement('input');
  input.type = 'file';
  input.addEventListener('change', handleFileSelect);
  input.click();
});

<button id="select-file">Select File</button>