Google Maps & $parse

http://angularjs.org/ 10.6 example

HTML

<html xmlns:ng="http://angularjs.org" ng:app>
    <head><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js" ng:autobind></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=pl"></script>
    </head>
    <body>

<div ng:controller="TestCtrl" >
    <p>Please click on the map</p>
   <ui:map style="height:300px;width:400px;border:2px solid #777777;margin:3px;" ui:options="{}" ui:pin="mapPin" ui:view="map"></ui:map> 
    
    MapPin: {{mapPin}}
</div>

<br />
<br />
</body>

JavaScript

TestCtrl = function() {
    // the value we want to change
    this.map = {};
    this.mapPin = 'No pin set yet';
}

angular.widget('ui:map',['$parse', '$element', function($parse, element) {
    
    console.log(element);
    
    if (!google || !google.maps) {
        return;
    }
    var compiler = this;
    compiler.descend(true);
    compiler.directives(true);

    return function(linkElement) {
        var elem = linkElement;
        
        // set it here? good idea?
        var currentScope = this;
        
        
        var setPin = $parse(elem.attr('ui:pin')).assign;       // should be mapPin

        // append new div element
        var div = $('<div style="width:400px;height:300px;"></div>').appendTo($(elem));
        var myOptions = {
            zoom: 6,
            center: new google.maps.LatLng(46.87916, -3.32910),
            mapTypeId: 'terrain'
        };
        var map = new google.maps.Map(div.get(0), myOptions);
        
        google.maps.event.addListener(map, 'click', function(e) {
            currentScope.$apply(function() {
                setPin(currentScope, {
                lat: e.latLng.lat(),
                lng: e.latLng.lng()
              });
            });
        }); // eo listener
    } // eo return function
    
    
}]); // eo widget