Angular Google Places

HTML

<script src="//maps.googleapis.com/maps/api/js?libraries=places"></script>
<div ng-app="ctrl" ng-controller="mindCtrl">
    <input type="text" id="address" name="address" placeholder="Start Typing An Address" ng-model="address1" details="placeDetails" googleplace />
    <p>{{address1}} 
    
</pre>
</div>

CSS

input[type='text'] {width:300px}

JavaScript

var app = angular.module("ctrl", []);
app.directive('googleplace', function () {
    return {
        require: 'ngModel',
        scope: {
            ngModel: '='
            
        },
        link: function (scope, element, attrs, model) {
            var options = {
                types: ['address'],
                componentRestrictions: {}
            };
            scope.gPlace = new google.maps.places.Autocomplete(element[0], options);

            google.maps.event.addListener(scope.gPlace, 'place_changed', function () {
                scope.$apply(function () {
                    var result  = scope.gPlace.getPlace();
                    if (scope.details.name) {
                        element.val(result.name);
                        model.$setViewValue(result.name);
                        element.bind('blur', function (value) {
                            if (value.currentTarget.value !== "") {
                                element.val(result.name);
                            } // make sure the model value isn't blank
                        });
                    }
                });
            });
        }
    };
}).controller("mindCtrl", function ($scope) {
    
});