Angular Typeahead (ui.bootstrap.typeahead) - getting latitude/longitude

Question

I am having trouble using the angular typehead

There is an example here that uses angular typehead to create an auto-complete using the Google maps API.

My problem is that when I click on the results within the typehead my model is then populated with the item.formatted_address data. How can I click on the formatted address and then populate with the lat/longitude data

// Any function returning a promise object can be used to load values asynchronously   
$scope.getLocation = function(val) {
  return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
    params: {
      address: val,
      sensor: false
    }
  }).then(function(res){
    var addresses = [];
    angular.forEach(res.data.results, function(item){
      addresses.push(item.formatted_address);
    });
    return addresses;
  });   };

<h4>Asynchronous results</h4>
<pre>Model: {{asyncSelected | json}}</pre>
<input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" class="form-control">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>

Answer 1

There are many ways of achieving the desired result, below I'm presenting one of the possibilities. But before diving into the solution it is important to notice that the typeahead uses similar syntax to the AngularJS built-in select directive and as such you can use expressions in all the parts of the typeahead attribute. Given this you could write:

typeahead="address as address.formatted_address for address in getLocation($viewValue)"

and change your XHR success callback to:

.then(function(response){
      return response.data.results.map(function(item){
        return {
          location: item.geometry.location,
          formatted_address: item.formatted_address
        }
      });

Here is a working plunk: http://plnkr.co/edit/4PwaFaeIOeIDRCsvuidn?p=preview