app.js

var myApp = angular.module('myApp', []);

myApp.directive('googleplace', function() {
    return {
        require: 'ngModel',
        scope: {
            ngModel: '=',
            details: '=?'
        },
        link: function(scope, element, attrs, model) {
            var options = {
                types: [],
                componentRestrictions: {}
            };
            scope.gPlace = new google.maps.places.Autocomplete(element[0], options);

            google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
                scope.$apply(function() {
                    scope.details = scope.gPlace.getPlace();
                    model.$setViewValue(element.val());                
                });
            });
        }
    };
});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.gPlace;
}

index.html

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <div>Google Places Autocomplte integration in Angular</div>
    <div>To Test, start typing the name of any Indian city</div>
    <div>selection is: {{chosenPlace}}</div>
    <div>details object is: {{chosenPlaceDetails}}</div>
    <div><input ng-model="chosenPlace" details="chosenPlaceDetails" googleplace/></div>
</div>

Muchas gracias :)

Awesome !! Lifesaver

details="chosenPlaceDetails" is not updated in my controller. Any idea why ? Thanks !

Hi, maybe is a noob question but also i've the problem with the "undefined" in controller...if i use $scope.chosenPlaceDetails in controller i get "undefined". Please help!

Hello Yesnoj I approached it by using $watch to see if $scope.chosenPlaceDetails is populated .

        $scope.$watch(function ($scope) { return $scope.chosenPlaceDetails }, function () {
            if (angular.isDefined($scope.chosenPlaceDetails )) {
               console.log($scope.chosenPlaceDetails );
            }
        });

If any one having tapp issues on android please see this link https://stackoverflow.com/questions/34943536/not-able-to-select-google-map-drop-down-value . just copy paste the answer of abhay kumar.

$scope.disableTap = function() { var container = document.getElementsByClassName('pac-container'); angular.element(container).attr('data-tap-disabled', 'true'); var backdrop = document.getElementsByClassName('backdrop'); angular.element(backdrop).attr('data-tap-disabled', 'true'); angular.element(container).on("click", function() { document.getElementById('pac-input').blur(); }); };

<input id="pac-input" type="text" placeholder="Search Location" data-tap-disabled="true" ng-change='disableTap()' ng-model="search">

Hi,
Thank you for sharing this. My issue is how can I extract only lat and long form this result ?
I am new to angular js. Please guide me.

Result:-
selection is: Banjara Hills, Hyderabad, Telangana, India
details object is: {"address_components":[{"long_name":"Banjara Hills","short_name":"Banjara Hills","types":["sublocality_level_1","sublocality","political"]},{"long_name":"Hyderabad","short_name":"Hyderabad","types":["locality","political"]},{"long_name":"Hyderabad","short_name":"Hyderabad","types":["administrative_area_level_2","political"]},{"long_name":"Telangana","short_name":"Telangana","types":["administrative_area_level_1","political"]},{"long_name":"India","short_name":"IN","types":["country","political"]}],"adr_address":"<span class="extended-address">Banjara Hills, <span class="locality">Hyderabad, <span class="region">Telangana, <span class="country-name">India","formatted_address":"Banjara Hills, Hyderabad, Telangana, India","geometry":{"location":{"lat":17.4138277,"lng":78.43975840000007},"viewport":{"south":17.4016313,"west":78.41737469999998,"north":17.4301997,"east":78.4541438}},"icon":"https://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png","id":"270974de742a3a7a7236a589a673c622736d7199","name":"Banjara Hills","photos":[{"height":2322,"html_attributions":["<a href="https://maps.google.com/maps/contrib/115966763618104385860/photos">Arya Banerjee"],"width":4128},{"height":3743,"html_attributions":["<a href="https://maps.google.com/maps/contrib/110743467107312365242/photos">Sai krishna Reddy"],"width":5612},{"height":3096,"html_attributions":["<a href="https://maps.google.com/maps/contrib/112540681264251892936/photos">Muhammad Maseeh ullah Khan"],"width":4128},{"height":3000,"html_attributions":["<a href="https://maps.google.com/maps/contrib/111166319390201928275/photos">Srinivas Shastri"],"width":4000},{"height":1440,"html_attributions":["<a href="https://maps.google.com/maps/contrib/115456674788909736708/photos">Naren Chandra"],"width":2560},{"height":700,"html_attributions":["<a href="https://maps.google.com/maps/contrib/103794174443529416150/photos">Naresh Edara"],"width":1600},{"height":3168,"html_attributions":["<a href="https://maps.google.com/maps/contrib/117407300750364217377/photos">Lokesh Durbha"],"width":4752},{"height":3119,"html_attributions":["<a href="https://maps.google.com/maps/contrib/108269796629331845712/photos">Raji E"],"width":4159},{"height":1840,"html_attributions":["<a href="https://maps.google.com/maps/contrib/107689909642948560241/photos">Sreenadh Reddy"],"width":3280},{"height":3263,"html_attributions":["<a href="https://maps.google.com/maps/contrib/109245430594899774391/photos">Siddharth Moghe"],"width":2610}],"place_id":"ChIJpTDC5yiXyzsRoMr39VKX9Qs","reference":"CmRbAAAAYuVOssw2FhSmYjDSTh7HqxfYhYAjRG7u7_NxM6XUJ1uYKQAL8pUPzIJ6qSCIER4izm_k_qQxW6hwj1rbk5AYDatQpM-SEJUacR7EJblTCb6MFHrKSazQVUuLPJ2d8LKwEhAn-UNLfgmNppd6G_CopBQ8GhSJJZm5iX_ESOpurib7vlVKyB8Wcw","scope":"GOOGLE","types":["sublocality_level_1","sublocality","political"],"url":"https://maps.google.com/?q=Banjara+Hills,+Hyderabad,+Telangana,+India&ftid=0x3bcb9728e7c230a5:0xbf59752f5f7caa0","utc_offset":330,"vicinity":"Banjara Hills","html_attributions":[]}