AngularJS error: $apply already in progress


I have this AngularJS 1.0.7 code that is using angular-file-upload plugin to upload photos:


<div ng-hide="user.mainPhoto" style="margin-top: 20px">
        <div ng-controller="FileUploadCtrl">
             <button class="btn btn-success btn-primary" ng-click="clickFileInput('addMainPhoto')"><i class="fa-icon-picture"  style="vertical-align: middle"></i> {{'ADD_PROFILE_PHOTO' | translate}}</button>
    <input id="addMainPhoto" type="file" ng-file-select="onFileSelect($files, 'user'," class="hidden" accept="image/*">                        


.controller('FileUploadCtrl', function ($scope, $upload, growl, API_SERVER_URL, ngProgress, PhotoService) {

      $scope.clickFileInput = function(id){
        $('#' + id).trigger('click');

      $scope.onFileSelect = function($files, entity, id, action) {
        //$files: an array of files selected, each file has name, size, and type.
        console.log("BoatPhotoUploadCtrl-->entity:" + entity + "; id:" + id);

When I click on the upload button, I get next error:

Error: $apply already in progress
        at Error (native)
        at beginPhase (http://localhost/lib/angular/angular.js:8334:40)
        at Object.$get.Scope.$digest (http://localhost/lib/angular/angular.js:7913:9)
        at (http://localhost/lib/bootstrap/ui-bootstrap-tpls-0.6.0.min.js:1565:34)
        at HTMLDocument.x.event.dispatch (
        at HTMLDocument.x.event.add.v.handle (
        at Object.x.event.trigger (
        at HTMLInputElement.<anonymous> (
        at Function.x.extend.each (
        at x.fn.x.each (

I´m not using $apply by myself, and it´s quite strange because I´m using same plugin to upload photos in other part of the application and it´s working fine.


$('#' + id).trigger('click'); - this line causes an error

Answered By – Arman Mukatov

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.