AngularJS + Google Maps Info Box directive

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
    <title></title>
    
    <!-- Links (anchor tags) inside Google Maps InfoBox only work with version "1.0.0-beta.1". From version "1.0.0-beta.2" they don't work, nothing happens when clicking. -->
    <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
    
    <script src="app.js"></script>
  </head>

  <body ng-app="starter">
    <div class="map-container" ng-controller="MapCtrl">
      <div id="map-canvas"></div>
    </div>
  </body>

</html>

body, html { margin: 0; padding: 0; }
.scroll { height: 100%; }
.map-container,
.google-map { height: 100%; }
body, html, #map-canvas { width: 100%; height: 100%; }

.infobox {
    border:0 solid black;
    margin-top: 8px;
    background: #000;
    color:#fff;
    font-family: Helvetica;
    padding: 1em 1em;
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
}
.infobox p { margin: 0; }
.infobox .title { font-size: 15px; line-height: 1.25em; margin-bottom: 5px; }
.infobox .address { font-size: 12px; line-height: 1.25em; margin-bottom: 15px; }
.infobox a {
    cursor: pointer;
    background-color: #33AAFF;
    text-decoration: none;
    padding: 5px 0 2px;
    color: #eee;
    text-align: center;
    display: block;
    margin: 5px auto 0;
    text-transform: uppercase;
}
.infobox a:hover {
    background-color: #40B7FF;
}

var app = angular.module('starter',[])

.directive('infoBox', function ($compile) {
  return {
    restrict: 'AE',
    replace: true,
    transclude: true,
    templateUrl: "info-box.html",
    link: function(scope, element, attrs){
      
      // ? i'm completely lost here
      
    }  
  };
})

.controller('MapCtrl', function($scope, $compile) {
  
  $scope.locations = [
    { id: 08, name: 'Koxixos', address: 'Av. Gov Irineu Bornhausen, 3933', latitude: '-27.573228', longitude: '-48.539657' }
  ];

  $scope.latlng = new google.maps.LatLng($scope.locations[0].latitude, $scope.locations[0].longitude);
  
  $scope.map = new google.maps.Map(document.getElementById("map-canvas"), {
    zoom: 11,
    center: $scope.latlng,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },        
  });

  $scope.marker = new google.maps.Marker({
    position: $scope.latlng,
    map: $scope.map,
    visible: true,
    locationData: $scope.locations[0]
  });
  
  // rather create this inside the info-box directive?
  $scope.infoBox = new InfoBox({
    disableAutoPan: true,
    maxWidth: 150,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
        background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
        opacity: 1,
        width: "280px"
    },
    closeBoxMargin: "18px 10px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1)
  });
  
  // this is probably wrong.
  $scope.infoBoxTemplate = $compile('<info-box></info-box>')($scope);
 
  google.maps.event.addListener($scope.marker, 'click', function() {
    
    // updates location.name and location.address on the infobox template
    
    //console.log($scope.infoBoxTemplate);
    
    $scope.infoBox.setContent($scope.infoBoxTemplate);
    
    $scope.infoBox.open($scope.map, this);
  });
});

does this makes sense?

<div class="infobox">
  <div ng-click="closeInfoBox()">close</div>
	<p class="titulo"> {{ location.name }} </p>
	<p class="endereco"> {{ location.address }} </p>
</div>