Angular + Google Places Autocomplete

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-app="myApp" ng-controller="MainController">
    <h1>Hello, World!</h1>
    <input type="text" ng-model="search" my-autocomplete>
    <p>Search: {{search}}</p>

    <script src="http://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=false"></script>
    <script data-require="angular.js@1.3.0-rc2" data-semver="1.3.0-rc2" src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
    <script src="script.js"></script>
  </body>

</html>

angular.module('myApp', [])
.controller('MainController', function($scope) {
})
.directive('myAutocomplete', function($log) {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, element, attrs, ngModel) {
      var autocomplete = new google.maps.places.Autocomplete(element[0]);
      google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var address = element.prop('value')
        ngModel.$setViewValue(address);
      });
    }
  };
});

/* Styles go here */