In this article I will explain with an example, how to implement Google Places AutoComplete using AngularJS.
The Google Places AutoComplete will be implemented using the ngAutoComplete directive in AngularJS.
 
 
Implement Google Places AutoComplete using AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Along with the AngularJS JavaScript file, the Google Maps API JS file and the ngAutoComplete.js file also needs to be inherited in order to implement the Google Places AutoComplete.
The following AngularJS App makes use of ngAutoComplete module.
Note: If you want to learn more about these directives please refer my article Introduction to AngularJS.
 
The HTML DIV consists of an HTML TextBox and a Button. The TextBox has been assigned ng-autocomplete and ng-model directives.
The Button has been assigned ng-click directive.
Note: If you want to learn more about ng-click directive, please refer my article ng-click directive example.
 
When the Button is clicked, the selected Location in the Google Places AutoComplete is displayed using JavaScript Alert Message Box.
Note: If you want to learn more on displaying JavaScript alert with AngularJS, please refer my article AngularJS: Display (Show) JavaScript Alert box.
 
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=?"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/wpalahnuk/ngAutocomplete/master/src/ngAutocomplete.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['ngAutocomplete'])
        app.controller('MyController', function ($scope, $window) {
            $scope.GetLocation = function () {
                $window.alert($scope.SelectedLocation);
            };
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <input type="text" ng-autocomplete ng-model="SelectedLocation" />
        <input type="button" value = "Submit" ng-click="GetLocation()"/>
    </div>
</body>
</html>
 
 
Screenshot
AngularJS Google Places: Implement Google Places AutoComplete using AngularJS
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code