ui-bootstrap modal scope bug

Question

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: http://plnkr.co/edit/xGSHz4EkZvGr2D6CUeBz?p=preview

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?

Thanks!

Answer 1

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) http://plnkr.co/edit/B5kZaIA5xi2RediUTBK7?p=preview

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. :-) http://egghead.io/lessons/angularjs-the-dot