angularjs UI bootstrap modal with google places

Question

I'm trying to open a Google Maps Places Autocomplete Address Form inside of a UI Bootstrap modal. My problem is that the google places dropdown is showing up behind the modal, Is there anyway to get it on top of the modal so you can see it?

Address Form https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

Bootstrap http://angular-ui.github.io/bootstrap/

Any help or Ideas would help a lot.

Answer 1

This turned out to just be a z-index issue, the problem was fixed with by adding the following to the CSS.

.pac-container {
    z-index: 100000;
}

Answer 2

I have angular7 + bootstrap modal this not work for me

so I add ::ng-deep, see the final css below

::ng-deep .pac-container { z-index: 100000; }

thanks to referscus for his solution !!!