Angular-UI $scope.myMap is undefined

I'm trying to $watch myMap but it never fires. I've narrowed it down to having used ui-if (if I remove the ui-if, $scope.myMap is the proper google maps object). However I need to keep the ui-if in order to get ui-map to wait for my AJAX/Db query to finish.

Why isn't myMap being added to scope (and how do I get it to)?

Plunker

Edit I see from this GitHub issue that ui-if creates its own scope. So how do I access its scope / wherever myMap now lives? Also, why does ui-if create a new scope?

You can specify where you want the object to be stored, including on a parent scope:

ui-map="$parent.myMap"

Although this is considered to be semi unreliable (as any number of directives may create additional scope layers) and you may want to consider setting it to a property of an object.

Create a model on your GoogleMaps controller:

$scope.model = {};

Pass the model as reference to the ui-map directive:

ui-map="model.myMap"

Watch for changes:

$scope.$watch('model.myMap', function(map){
    ...
}

This way you avoid the creation of the myMap property inside the ui-if scope.

Also check this documentation for more information on the prototypical inheritance of scopes.