Select ng-model not updated in time for ng-click event


I’ve run into an issue with a select ng-model and ng-click. This occurs on devices and in emulators.

It appears that when you click a select and choose an option, then click a button that triggers an ng-click event without first closing the select the ng-click event occurs just before the ng-model update leaving things in an inconsistent state.

You can reproduce the issue with this pen:

See the Pen ng-options and ng-click by Scott Metoyer (@scottmetoyer) on CodePen.

To reproduce:

  • Click the select to open the options. Choose on option, but leave the select open.
  • Click the ‘Click to Show Color’ button.
  • The select closes (choosing the selected option). The alert indicates the state of the model at the time of the click (the old value), but you can see the select shows the updated value.

I can get it to behave correctly in the IOS simulator by wrapping the alert in a $timeout of a second, but on slower devices and in the Android emulator even this does not help.

Is there a better way to approach this? Any ideas? Thank you!

1 Like

Did you find a workaround here? I’m struggling with the same at the moment.

Hi - never did find a workaround!

I ended up scrapping the Ionic select altogether and just using a custom modal.

That solution worked nicely for me across platforms. If you’re interested, I can dig up the code and send it your way.

Yes, thank you. That would be much appreciated.

A way around the problem is making sure my clickable item is without reach from an open select, but that’s less user friendly. But better than producing unexpected behavior, I guess :slight_smile: