0

After migrating our AngularJS application from v1.2.9 to v1.6.9, whenever I click on any dropdown option, I get error in developer console stating

'Error: [$rootScope:inprog] $apply already in progress'

I have tried using $timeout solution and it solves the issue for some cases(where $apply was used). However, this specific issue occurs when I am clicking on a dropdown option. I have not called $apply anywhere in my code. I tried using the ng-options in select tag too, however the issue still occurs.

Select tag that gives issue:
<select name="task" id="task" ng-model="search.task">
    <option data-ng-repeat="each in taskList" value="{{each.id}}"
            ng-selected="each.id==search.task">
      {{each.taskName}}
    </option>
</select>

Code changes after using ng-options:
<select ng-model="search.task" ng-options="each for each in taskList">
    <option value="">Task Type</option>
</select>

Please follow link for complete error stack

Error: [$rootScope:inprog] $apply already in progress http://errors.angularjs.org/1.6.9/$rootScope/inprog?p0=%24apply

How do I fix this error? Any help/pointer is much appreciated.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
B. Bokade
  • 1
  • 3
  • Read [AngularJS ` – georgeawg May 03 '19 at 13:36
  • @georgeawg : I have tried the above solution, no luck! I am facing this $apply issue for all select boxes across the application. – B. Bokade May 03 '19 at 15:08
  • Please note I am facing this issue only after the migration to 1.6, everything is working as expected in v1.2.x. – B. Bokade May 03 '19 at 15:16
  • The stack trace shows the second apply coming from `login_script.js` line 18665. – georgeawg May 03 '19 at 15:30
  • Possible duplicate of [Error: $rootScope:inprog — What is the correct way to 'not' execute $apply in angular?](https://stackoverflow.com/questions/42923234/error-rootscopeinprog-what-is-the-correct-way-to-not-execute-apply-in-a) – georgeawg May 03 '19 at 16:01

1 Answers1

0

Don't use ngSelected with ngModel1

<select name="task" id="task" ng-model="search.task">
    <option data-ng-repeat="each in taskList" value="{{each.id}}"
            ̶n̶g̶-̶s̶e̶l̶e̶c̶t̶e̶d̶=̶"̶e̶a̶c̶h̶.̶i̶d̶=̶=̶s̶e̶a̶r̶c̶h̶.̶t̶a̶s̶k̶"̶ >
      {{each.taskName}}
    </option>
</select>

From the Docs:

Note: ngSelected does not interact with the select and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected options.

— AngularJS ng-selected Directive API Reference

See additional Docs:

See Stackoverflow:

Diagnosing Error: $rootScope:inprog Action Already In Progress2

When you get this error it can be rather daunting to diagnose the cause of the issue. The best course of action is to investigate the stack trace from the error. You need to look for places where $apply or $digest have been called and find the context in which this occurred.

There should be two calls:

  • The first call is the good $apply/$digest and would normally be triggered by some event near the top of the call stack.

  • The second call is the bad $apply/$digest and this is the one to investigate.

Once you have identified this call you work your way up the stack to see what the problem is.

If the second call was made in your application code then you should look at why this code has been called from within an $apply/$digest. It may be a simple oversight or maybe it fits with the sync/async scenario described earlier.

If the second call was made inside an AngularJS directive then it is likely that it matches the second programmatic event trigger scenario described earlier. In this case you may need to look further up the tree to what triggered the event in the first place.

For more information, see AngularJS Error Reference - $rootScope/inprog - Diagnosing This Error

See also,

Community
  • 1
  • 1
georgeawg
  • 48,608
  • 13
  • 72
  • 95