title: Google maps autocomplete not working inside modal popup
body: <p>I am using google maps api.I am trying to implement autocomplete address feature for input box.But the problem is in the page everything seems to work but the same is not working inside a modal popup.</p>
  
  <p><strong>Here is the html</strong></p>
  
  <pre><code>    &lt;div class="col-xs-5 col-sm-2 col-md-2"&gt;
      &lt;a href="javascript:void(0)" data-ng-click="addlocationpopup()"&gt;+New 
      Location&lt;/a&gt;
      &lt;/div&gt; &lt;!--button which calls popup --&gt;
  </code></pre>
  
  <p><strong>Here is the modal popup</strong></p>
  
  <pre><code>    &lt;div class="modal right fade addlocation" id="myModal_5" tabindex="-1"
      role="dialog" aria-labelledby="myModalLabel2" data-keyboard="false"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;h4 class="modal-title" id="myModalLabel1"&gt;ENTER LOCATION 
              DETAILS&lt;/h4&gt;
          &lt;/div&gt;
          &lt;form name="locationForm" novalidate="novalidate" method="post"&gt;
              &lt;div class="modal-body"&gt;
                  &lt;div class="row"&gt; 
                    &lt;div&gt;
                    &lt;input id="autocomplete" placeholder="Enter your address"
                    onFocus="geolocate()" type="text"&gt;&lt;/input&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
           &lt;/form&gt;
          &lt;/div&gt;
         &lt;/div&gt;
        &lt;/div&gt;
      &lt;script 
      src="https://maps.googleapis.com/maps/api/js?
      key=mykey&amp;libraries=places&amp;callback=initAutocomplete" async defer&gt;
      &lt;/script&gt;
      &lt;script&gt;
      var placeSearch, autocomplete;
      var componentForm = {
      street_number: 'short_name',
      route: 'long_name',
      locality: 'long_name',
      administrative_area_level_1: 'short_name',
      country: 'long_name',
      postal_code: 'short_name'
    };
  
    function initAutocomplete() {
     autocomplete = new google.maps.places.Autocomplete(
          /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
          {types: ['geocode']});
     autocomplete.addListener('place_changed', fillInAddress);
    }
  
    function fillInAddress() {
      var place = autocomplete.getPlace();
  
      for (var component in componentForm) {
        document.getElementById(component).value = '';
        document.getElementById(component).disabled = false;
      }
  
      for (var i = 0; i &lt; place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
          var val = place.address_components[i][componentForm[addressType]];
          document.getElementById(addressType).value = val;
        }
      }
    }
  
    function geolocate() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var geolocation = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };
          var circle = new google.maps.Circle({
            center: geolocation,
            radius: position.coords.accuracy
          });
          autocomplete.setBounds(circle.getBounds());
        });
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Controller</strong>.<strong>js</strong>:</p>
  
  <pre><code>    $scope.addlocationpopup = function(){
      $(".addlocation").modal("show");
      }
  </code></pre>
  
  <p>If in page i put one input box and type it is working fine.But inside modal it is not working that is the places are not showing when i type inside input box.I dont understand why it is not working inside popup as the scripts are already loaded when page gets loaded.Can anyone tell how to make it work inside modal popup?</p>