Location lookup using ngAutocomplete

Uses ngAutocomplete and Google Maps API to search for a place and pushes the selected location to a list.

by bilbobaggins

HTML

<script src="//rawgit.com/wpalahnuk/ngAutocomplete/master/src/ngAutocomplete.js"></script>
<script src="//maps.googleapis.com/maps/api/js?libraries=places"></script>
<div ng-app="app" ng-controller="AppController as ctrl">
  <input type="text" ng-autocomplete options="calendar_ctrl.autocomplete_options" ng-model="ctrl.location" details="ctrl.location_result">
  <hr>
  <button ng-if="ctrl.location_list.length" ng-click="ctrl.location_list = []">Clear List</button>
  <h4>Locations  ({{ctrl.location_list.length}})</h4>
  <ul>
    <li ng-repeat="location in ctrl.location_list track by $index">{{location.name}}</li>
  </ul>
</div>

CSS

body {
  font-family: Helvetica;
}

input {
  width: 300px;
  padding: 8px;
  font-size: 24px;
  border-radius: 4px;
  box-shadow: none;
}

button {
  float: right;
  padding: 8px 16px;
  background: none;
  color: red;
  border: 0;
  font-size: 14px;
  cursor: pointer;
}

JavaScript

angular
  .module('app', ['ngAutocomplete'])
  .controller('AppController', AppController);

function AppController($scope) {
  var vm = this;

  vm.location = '';
  vm.location_list = [];
  vm.location_result = null; // this is the model we need to use

  // autocomplete options
  vm.autocomplete_options = {
    types: 'establishment'
  };

  // look for a change in the location and do something
  // its a little confusing because we're not watching the ng-model from this controller
  // but rather the model that gets set from the ngAutocomplete directive
  $scope.$watch(function() {
    return vm.location_result;
  }, function(location) {
    if (location) {
      vm.location_list.push(location);
      vm.location = '';
    }
  });

}