AddEventListener is intermittent in AngularJS

Question

What my code does is bring up the "Browse" window so we can select a file. There are no issues bringing up the Browse window. The issue is after I select a file, it won't call $scope.manageFileSelect. The reason why I coded it that way is because I didn't want to use the standard browse button. I'm tricking it by sending a click even on the fileInput. So for example, I clicked on file cover.jpg, and clicked Ok button, it won't show "Did I get called? Sigh! :(" on the console. However, if I select cover.jpg again, it will work. It's weird.

Here is my code:

 $scope.manageFileSelect = function(evt) {
  console.log('Did I get called? Sigh! :(');
  var file = evt.currentTarget.files[0];
  $scope.selectedFilename = file.name;
  var reader = new FileReader();
  reader.onload = function (evt) {
    $scope.$apply(function($scope) {
      $scope.myImage = evt.target.result;
      $timeout($scope.openImageToThumbnail, 1500);
    });
  };
  reader.readAsDataURL(file);
};

$scope.button = document.getElementById('fileInput');
$scope.button.addEventListener('click', function() {
  console.log('creating listener for manageFileSelect');
  $scope.input = document.createElement('input');
  $scope.input.type = 'file';
  $scope.input.addEventListener('change', $scope.manageFileSelect);
  $scope.input.click();
  console.log('input clicked');
});

Answer 1

This is the way I do when I have to select a file and storage in a javascript variable, with a full customize button: (see the fix I do to select the same file)

http://jsfiddle.net/rh63dd9w/

First you have the input element:

<button click-target="#inputFile">Select File</button>
<input type="file" fileread="file" id="inputFile" />

The directive fileread (source):

myApp.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.fileread = loadEvent.target.result;
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
                // Thanks to this you can select the same file
                element.val('');
            });
        }
    }
}]);

The click-target directive:

myApp.directive('clickTarget', function () {
    return {
        restrict: 'A',
        scope: {
            target: '@clickTarget'
        },
        link: function (scope, elem, attr) {
            var input = $(scope.target);
            elem.on('click', function () {
                $(input).click();
            });
        }
    };
});

and the css:

#inputFile {
    /* dont use display none because input.click() doesn't work in hiddens elements on some explorers */
    position: absolute;
    left: -300px;
}