Ionic Modal with ngMap using Google Place Autocomplete Won't Select Prediction

Question

I'm using ngMap with Ionic 1.2.x and I've put together custom-control that contains a places autocomplete directive that in a plain HTML test works, but when I put it inside the ionic application and open it in a modal the on-place-changed event never triggers when clicking on the places autocomplete prediction. When I mouse over the list of place predictions the mouse cursor icon doesn't change seemingly indicating the elements are not available for clicking.

UPDATE

I found a reference to this issue on GitHub, but the solutions don't appear to work when in a modal according to the last couple posts where data-tap-disabled="true" is used on pac-container.

I've attached an abridge CodePen of the issue. It's really easy to replicate.

DIRECTIVE

<ng-map id="gmap">

    // ...

    <custom-control class="gmap-place-autocomplete-control-container"
                    position="TOP_CENTER">

            <input placeholder="Search for places"
                   types="{{ createEventCtrl.types }}"
                   ng-model="createEventCtrl.address"
                   on-place-changed="createEventCtrl.placeChanged()"
                   places-auto-complete>

    </custom-control>

    // ...

</ng-map>

Answer 1

Got this working using this fix, but we don't like using jQuery in our AngularJS applications so I changed it a bit to be within the AngularJS API with a bit of native JavaScript.

Markup

<input placeholder="Search for places" 
       ng-model="locationCtrl.event.location"
       on-place-changed="locationCtrl.placeChanged()"
       places-auto-complete
       ng-focus="locationCtrl.disableTap($event)">

Controller

vm.disableTap = function(event) {

    var input = event.target;

    // Get the predictions element
    var container = document.getElementsByClassName('pac-container');
    container = angular.element(container);

    // Apply css to ensure the container overlays the other elements, and
    // events occur on the element not behind it
    container.css('z-index', '5000');
    container.css('pointer-events', 'auto');

    // Disable ionic data tap
    container.attr('data-tap-disabled', 'true');

    // Leave the input field if a prediction is chosen
    container.on('click', function(){
        input.blur();
    });
};