populate content of gmaps infowindow with template

{
  "region": "vancouver",
  "locations": [
    [49.285415,-123.114982],
    [49.287,-123.117]
  ],
  "user": {
    "defaults": {
      "center": [49.285415,-123.114982],
      "zoom":15
    }
  }
}

function Main() {}

function GoogleMaps( $scope , $http , Map ) {

  $http.get('map.json')
  .success(function(map_data, status, headers, config) {
    console.log('status: ', status, '\nmap_data: ', map_data, '\nconfig: ', config);
  
    Map.init(map_data,$scope);
  })
  .error(function(map_data, status, headers, config) {
    console.log('status: ', status, '\nmap_data: ', map_data, '\nconfig: ', config);
  });
  
}//GoogleMaps{}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="gMap">
  
  <head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
    <link href="style.css" rel="stylesheet" />
    <script>
      //document.write('&lt;base href="' + document.location + '" /&gt;');
    </script>
    <script src="app.js"></script>
    <script src="controllers.js"></script>
    <script src="services.js"></script>
  </head>
  
  <body>
    <div ng-view></div>
    <div id="map" ng-controller="GoogleMaps"></div>
  </body>

</html>

'use strict';

/* App Module */

angular.module( 'gMap' , ['services'])
.config([
  '$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when(
        '/',{
          templateUrl: 'main.html',
          controller: Main
      }).
      otherwise({redirectTo: '/'});
  }//fn()
]);//config()

'use strict';

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

app.factory('Map', function( $rootScope , $compile ){

  var canvas   = document.getElementById('map'),
    defaults = {
      center:    new google.maps.LatLng(0,0),
      zoom:      4,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

  return {
    init:function( map_data , scope ) {

      var user_data = map_data.user.defaults,
        locations = map_data.locations,
        map_opts = {
          "center":    (typeof user_data.center !== 'undefined')
            ? new google.maps.LatLng(user_data.center[0],user_data.center[1])
            : defaults.center,
          "zoom":      (typeof user_data.zoom !== 'undefined')
            ? parseInt(user_data.zoom,10)
            : defaults.zoom,
          "mapTypeId": defaults.mapTypeId
        };
      var Map = $rootScope.map = new google.maps.Map( canvas , map_opts );
      scope.markers = [];

      for ( var count = locations.length, i = 0; i < count; i++ ) {

        var latLng  = locations[i],
          marker = new google.maps.Marker({
            position: new google.maps.LatLng( latLng[0] , latLng[1] ),
            map:      Map,
            title:    '('+latLng[0]+","+latLng[1]+')'
          }),//marker
          infowindow = new google.maps.InfoWindow();//infowindow
          scope.markers[i] = {};
          scope.markers[i].locations = [ latLng[0] , latLng[1] ];
        
        var content = '<div id="infowindow_content" ng-include src="\'infowindow.html\'"></div>';
        var compiled = $compile(content)(scope);

//console.log(scope);
        google.maps.event.addListener(
          marker,
          'click',
          (function( marker , scope, compiled , localLatLng ){
            return function(){
              scope.latLng = localLatLng;//to make data available to template
              scope.$apply();//must be inside write new values for each marker
              infowindow.setContent( compiled[0].innerHTML );
              infowindow.open( Map , marker );
            };//return fn()
          })( marker , scope, compiled , scope.markers[i].locations )
        );//addListener
        
      }//for()
    }//init
  };//return

});//

<h4>{{latLng[0]}},{{latLng[1]}}</h4>

html,body,#map {
  height:100%;
  width:100%;
}

Foo