Click on element work unstabilly

Question

$scope.clickUpload = function(){
        $timeout(function() {
            angular.element('#upload').trigger('click');
        }, 100);
    };

For example, 3 times this works fine, but on 4th click - nothing going on How can I fix this?

Answer 1

I am editing my original answer since I didn't fully understand what it is you are trying to do. You can style an input type="file" without having to use jQuery/javascript to hide the original element and simulate a click on it. You can use standard HTML/CSS to do this...

CSS:

.upload  {
    height:25px;
    width:70px;
    background:#ccc;
    color:#fff;
    overflow:hidden;
    text:'Upload';
}
.upload input {
    display: block !important;
    width: 70px !important;
    height: 25px !important;
    opacity: 0 !important;
    overflow: hidden !important;
}
#uploadText {
    left: 6px;
    position: relative;
    top: -45px;
}

HTML:

<div class="upload">
  <input type="file" name="upload" />
  <h3 id="uploadText">Upload</h3>
</div>

Given these are not ideal styles and I have no future as a graphic designer, they are enough to demonstrate how you can modify the style of the standard input type="file" without needing javascript.