AngularJS - Google location service

by mrajcok

HTML

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places&language=en-US"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-resource.min.js"></script>
    <script>
        'use strict';

        angular.module('Otd', ['OtdDirectives']);

        /* Controllers */
        function SearchForm($scope){
            $scope.location = '';

            $scope.doSearch = function(){
                if($scope.location === ''){
                    alert('Directive did not update the location property in parent controller.');
                } else {
                    alert('Yay. Location: ' + $scope.location);
                }
            };
        }

        /* Directives */
        angular.module('OtdDirectives', []).
            directive('googlePlaces', function(){
                return {
                    restrict:'E',
                    replace:true,
                    // transclude:true,
                    scope: {location:'='},
                    template: '<input id="google_places_ac" name="google_places_ac" type="text" class="input-block-level"/>',
                    link: function($scope, elm, attrs){
                        var autocomplete = new google.maps.places.Autocomplete($("#google_places_ac")[0], {});
                        google.maps.event.addListener(autocomplete, 'place_changed', function() {
                            var place = autocomplete.getPlace();
                            $scope.location = place.geometry.location.lat() + ',' + place.geometry.location.lng();
                            $scope.$apply();
                        });
                    }
                }
            });
    </script>
</head>
<body>
<div ng-app="Otd"...