title: Google Places Autocomplete not showing up
body: <p>I've been working on this for hours trying to figure out why the supposedly simple autocomplete wasn't showing up.</p>
  <p>It turns out that in my code, the input element is being set to <code>autocompete=&quot;off&quot;</code>, and the style on the pac-container is <code>display: none</code>.</p>
  <p>I can change these values in DevTools, and it works fine, but I can't figure out how or why these are being set to these values.</p>
  <p>My autocomplete is set-up in an Angular Directive, like this, where loadGmaps gets the google api.</p>
  <pre>
  template: '&lt;input id="google_places_ac" name="google_places_ac" type="text" class="input-block-level"/&gt;',
  link: function($scope, elm, attrs){
      loadGmaps().then(function(){
  
      var autocomplete = new google.maps.places.Autocomplete($("#google_places_ac")[0], {});
      console.log(autocomplete);
      google.maps.event.addListener(autocomplete, 'place_changed', function() {
          var place = autocomplete.getPlace();
          $scope.position = {
              lat: place.geometry.location.lat(),
              lon:  place.geometry.location.lng()
          };
          $scope.$apply();
      });
  });
  </pre>
  <p>---------------------Update----------------------------------------------</p>
  <p>Hopefully nobody else is lead astray by this, the <code>autocomplete=&quot;off&quot;</code> is a bit misleading. Even with <code>autocomplete=&quot;off&quot;</code>, the autocomplete still works, so that wasn't the problem. I am over-writing the css of the  <code>.pac-container</code> element, which holds the results with</p>
  <pre>
  .pac-container {  //this is a fix for google autocomplete not showing up
      z-index: 10000 !important;
      display: block !important;
  }
  </pre>
  <p>The problem with this is that once an item has been selected from the autocomplete, the autocomplete remains visible, I'm pretty sure there is a better way to be using autocomplete.</p>