title: Google places autocomplete with angular js
body: <p>I am trying to make google places autocomplete work with angular js. Here is <a href="http://jsfiddle.net/punchouty/cTD2a/2/" rel="noreferrer">jsfiddle</a> - 
  Model is not getting updated after'place_change' event. It is getting updated on change of input.</p>
  
  <p>Below is html code -
  HTML</p>
  
  <pre><code>&lt;body ng-app="mapApp"&gt;
      &lt;div ng-controller="MapController"&gt;
          &lt;input id="from" type="text" ng-model="user.from" placeholder="Type Address" class="ng-pristine ng-valid" autocomplete="off"&gt;
          &lt;input type="hidden" ng-model="user.fromLat"&gt;
          &lt;input type="hidden" ng-model="user.fromLng"&gt;
              &lt;p&gt;{{user.from}} &lt;br&gt; {{'Latitude : ' + user.fromLat + ', Longitutde : ' + user.fromLng}}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt; 
  </code></pre>
  
  <p>Java Script</p>
  
  <pre><code>var mapApp = angular.module('mapApp', []);
  
  mapApp.controller('MapController', function ($scope) {
      $scope.user = {'from': '', 'fromLat': '', 'fromLng' : ''};
      var options = {
          componentRestrictions: {country: "in"}
      };
      var inputFrom = document.getElementById('from');
      var autocompleteFrom = new google.maps.places.Autocomplete(inputFrom, options);
      google.maps.event.addListener(autocompleteFrom, 'place_changed', function() {
          var place = autocompleteFrom.getPlace();
          $scope.user.fromLat = place.geometry.location.lat();
          $scope.user.fromLng = place.geometry.location.lng();
          $scope.user.from = place.formatted_address;
      });
  });
  </code></pre>