AngularJS ng-inclure à l'intérieur de Google Maps InfoWindow?

J'essaie d'inclure un fichier de modèle views/infowindow.html que le contenu de mon InfoWindow de service, j'ai écrit à initier l'api google maps:

for ( var count = locations.length, i = 0; i < count; i++ ) {
var latLng  = locations[i],
marker = new google.maps.Marker({

}),
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(
marker,
'click',
(function( marker , latLng ){
return function(){
var content = '<div ng-include src="\'infowindow.html\'"></div>';
infowindow.setContent( content );
infowindow.open( Map , marker );
}//return fn()
})( marker , latLng )
);//addListener
}//for

Cependant, il semble que Angulaire n'est pas le traitement content lorsqu'il est inséré dans l'InfoWindow (lors de l'inspection du code via des Outils de Dev, le code qui est insérée est <div ng-include src="'views/infowindow.html'"></div>).

J'espérais Angulaire serait pré-traitement de ma inclure avant il a été inséré dans la bulle informative, mais hélas non.

Est ce que je suis en train de faire est possible?

Je pense que je vais devoir en quelque sorte de mettre en cache le modèle avant de le transmettre à infowindow.setContent()mais je ne sais pas comment faire (ou si c'est encore ce que je devrait faire). Je préfère charger le modèle de l'événement au lieu de la mise en cache et de l'injecter pour chaque marqueur.

MODIFIER à la Recherche à $templateCache et un SI la question.

EDIT 2 Voici un plunk qui essaie d'utiliser $compile (le contenu de l'InfoWindow est encore <div id="infowindow_content" ng-include src="'infowindow.html'"></div>)


SOLUTION

La base de vient de Marque de la réponse ci-dessous. Dans sa solution, le contenu de l'InfoWindow est compilé sur le premier clic (de tout marqueur), mais l'InfoWindow ne fait pas l'ouvrir jusqu'à ce qu'un autre clic sur un Marqueur, probablement parce que GoogleMaps est impatient.

Le déplacement de la $compile à l'extérieur et en passant ensuite le modèle compilé dans .addListener résout ce problème:

for (  ) {

infowindow = new google.maps.InfoWindow();
scope.markers 
var content = '<div id="infowindow_content" ng-include src="\'infowindow.html\'"></div>';
var compiled = $compile(content)(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

Mise À Jour Plunker.

source d'informationauteur jacob