Location lookup using ngAutocomplete

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

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  ng-model="ctrl.location" >
  
</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 = '';
    }
  });

}