Adding google autocomplete search bar to ion-nav-title

Using Google Maps Javascript API I can’t get autocomplete to bind to the input field based on element id. If I put the search bar in <ion-content> it works fine, but in the ion-nav-title bar its like it can’t see the element ID.

In the controller:

var input = ( document.getElementById('searchCity') ) ;
var autocomplete = new google.maps.places.Autocomplete(input) ;

In my HTML:

<ion-nav-title>
   <input type="text" id="searchCity" ng-model="$parent.searchInfo.searchCity" ng-change="$parent.disableTap('searchCity')">
</ion-nav-title>

The above returns an error with Google: InvalidValueError: not an instance of HTMLInput Element
If I move the above input code to the ion-content section, it all works fine.

hmmm, on a hunch I wondered if it was an HTML loading issue. In my controller I added a timeout to delay binding autocomplete to the input element ID and it worked.

setTimeout( function() {
   var autocomplete = new google.maps.places.Autocomplete(input) ;
},1000) ;

Is there a better method to use to ensure the DOM has loaded before trying to bind the element ID?