Getting $ rootScope: inprog error when programmatically invoking input type type input method

Question

I want to create a custom component for uploading files. I made the following code in html

HTML CODE

<input id="upload" type="file" style="display: none;">// don`t want to render default
<button class="parimarybtnVD" type="button" ng-click="clickUpload()">Browse</button>

Js code

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

But getting the following error when I pressed 'button'.

           Error: [$rootScope:inprog] http://errors.angularjs.org/1.2.16/$rootScope/inprog?p0=%24apply
at Error (<anonymous>)
at http://localhost:7001/RightsWeb/scripts/resource/angular.min.js:6:450
at l (http://localhost:7001/RightsWeb/scripts/resource/angular.min.js:102:171)
at h.$digest (http://localhost:7001/RightsWeb/scripts/resource/angular.min.js:105:497)
at HTMLDocument.D (http://localhost:7001/RightsWeb/scripts/utill/ui-bootstrap-tpls-0.11.0.min.js:9:14775)
at HTMLDocument.f.event.dispatch (http://localhost:7001/RightsWeb/extResources/jquery/jquery-1.7.1.min.js:3:4351)
at HTMLDocument.h.handle.i (http://localhost:7001/RightsWeb/extResources/jquery/jquery-1.7.1.min.js:3:328)
at Object.f.event.trigger (http://localhost:7001/RightsWeb/extResources/jquery/jquery-1.7.1.min.js:3:3038)
at <error: TypeError: Accessing selectionDirection on an input element that cannot have a selection.>
at Function.e.extend.each (http://localhost:7001/RightsWeb/extResources/jquery/jquery-1.7.1.min.js:2:11937) 

Can someone tell me why I am getting this error? If there is a better way to do custom file upload in angularjs, please advise. Thanks at Advance.

Answer 1

In angular, only one operation $digestor can be performed at any given time $apply.

Use $timeout.

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

OR, I suggest you use

<button 
    class="parimarybtnVD" 
    type="button" 
    onclick="document.getElementById('upload').click()">Browse</button>