Привязка шаблона директивы angularjs для openlayers не работает

Моя угловая директива - это приложение для карт openlayers.

<div ng-app="app">
    <map-container></map-container>
</div>

Угловой рабочий код здесь:

angular.module("app",[]);

angular.module("app").controller("MapContainerController", function ($scope) {
    $scope.map = new ol.Map({});
});

angular.module("app").directive("mapContainer", function ($timeout) {
    return {
        "transclude": true,
        "controller": "MapContainerController",
        "link": function (scope) {
            var map = scope.map;
            map.setTarget(scope.targetElement || "map");
            map.addLayer(new ol.layer.Tile({
                source: new ol.source.OSM()
            }));
            map.setView(new ol.View({
                zoom: 3,
                center: [0, 0]
            }));
        },
        "template": '<div id="map" class="map" ng-transclude></div>'
    }
});

Но я хочу использовать параметр scope для имени элемента директивной карты, например, следующий код: демо-версия здесь.

<div ng-app="app">
    <map-container  target-element="map"></map-container>
</div>

Но это не работает.

angular.module("app").directive("mapContainer", function ($timeout) {
    return {
        "transclude": true,
        "scope": {
            "targetElement": "@"
        },
        "controller": "MapContainerController",
        "link": function (scope) {
            var map = scope.map;
            map.setTarget(scope.targetElement || "map");
            map.addLayer(new ol.layer.Tile({
                source: new ol.source.OSM()
            }));
            map.setView(new ol.View({
                zoom: 3,
                center: [0, 0]
            }));
        },
        "template": '<div id="{{targetElement}}" class="map" ng-transclude></div>'
    }
});

Все выглядит отлично, но это не работает. Я не мог понять проблему.