file-upload firing twice?

Question

I have following code:

.jade:

div(layout="row")
    div(layout="column", flex)
        label(style="margin-left: 5px") File
        md-button(class="md-raised", ng-click="onUploadClicked(3)") Upload
        input(id="image3", type="file", accept=".pdf", file-upload="uploadFile”, style="display: none;")

.js/controller:

$scope.uploadFile = function(file) {
    console.log("upload file");
}

$scope.onUploadImageClicked = function(position) {
    console.log("on upload image");
    $timeout(function() {
        document.querySelector('#image' + (position)).click();
    }, 100);
};

The log of upload file is printed twice, while on upload image is printed once only when I click on the Upload button, choose a file from file chooser, press Open button in file chooser.

What could be wrong in my code that makes it fires twice?

Update:

Tried to add event.stopPropagation() but no luck

My javascript lists. I only have angular.min.js one.

Answer 1

I found the root cause! Thanks to @AnthonyC to give me a clue.

I have this directive on 2 different javascripts that are loaded in my Jade file:

app.directive('fileUpload', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var onChangeFunc = scope.$eval(attrs.fileUpload);

            element.bind('change', function(){
                onChangeFunc(element[0].files[0]);
            });
        }
    };
}]);

Ensure there is one directive only in your whole javascripts code!