All we need is an easy explanation of the problem, so here it is.
I am noticing some weirdness with the ui-bootstrap modal scope. It seems that when using ng-model in it, you have to reference $parent to get to the scope of the modal controller. Notice in my plunker that the other properties such an ng-options doesn’t require $parent:
Any idea why? I found a similar issue here:
Scope issues with Angular UI modal
That led me to try the $parent change but I am unable to comment on that thread because I don’t have enough reputation.
Any idea why the scope seems to change?
How to solve :
I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.
The modal has its own scope (I’ve never used Angular UI, but it’s the only thing that can be happening) and when you’re setting “selectedLocation” the property is getting set on the modal’s scope and not your controller’s scope. The $parent is forcing it to got your controller’s scope, but that’s not a good solution because you’ll be locking your self into a certain structure always assuming the parent of the modal has the “model”.
Here’s a modified Plunker using a model object on your controller scope (using model.selectedLocation)
Anyways, if you put your property on something like “$scope.model.selectedLocation” that changes the behavior. Now, when I reference “model.selectedLocation” on the modal, the modal’s scope doesn’t have a model object so Angular goes up the scope chain to your controller’s scope (which does have a model object).
Watch this video from John Lindquist, I think it can explain it much better than I can. 🙂
Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂