angularjs - AngularJS GoogleマップのinfoWindowがコンパイルされていません

Question

AngularJS を使用して Google マップの infoWindow を実装しようとしました。

私はテンプレートを持ってい<div>{{foo}}<br/>ます$scope.foo="bar"

「{{foo}}」ではなく、値が「bar」の情報ウィンドウを表示したい。そのため、内容をコンパイルして設定しましたが、まだ運がありません。

これはGoogle Maps InfoWindow 内の AngularJS ng-includeと重複していると思われるかもしれませ ん。、しかし、コンテンツを動的にコンパイルしたい。

ここに私が今持っているコードがありますhttp://plnkr.co/edit/RLdAcaGz5FfmJEZi87ah?p=preview

  angular.module('myApp', []).controller('MyCtrl', function($scope, $compile) {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var mapOptions = { zoom: 4, center: myLatlng };

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var infowindow = new google.maps.InfoWindow({position: myLatlng});

    var x = "<div>{{foo}}<br/>{{foo}}";
    $scope.foo="bar";
    var el = $compile(x)($scope);
    infowindow.setContent(el.html());
    infowindow.open(map);
  })

と思っ$scope.apply()ていたのですが、コードで実行できませんでした。

Google マップの InfoWindow $compiled を使用する方法はありますか?