Openlayers is not supporting $templateCache of AngularJS

[bharathnav]

Hi,

I'm using openlayers3 + angularJS to represent maps. One of the functionality what I'm implementing is on click of maps I had to calculate the coordinates and plot a marker with some specific message. I'm trying to retrieve the message from html using $templateCache of angular but its not working. The compiled HTML content is displayed successfully in console but not in the message section of the marker. Please find the JS and HTML code below : JS : $scope.$on('openlayers.map.singleclick', function(event, data) { $scope.$applyAsync(function() { if (data !== null && !.isEmpty(data)) { var coordinates = ol.proj.transform(data.coord, 'EPSG:3857', 'EPSG:4326'); .clear($scope.markers); $scope.templateSiteName = 'Test Site'; $scope.templateSiteAddress = 'Test address'; var container = document.createElement('div'); container.innerHTML = $templateCache.get('views/template.html'); var tpl = $compile(angular.element(container))($scope)[0]; console.log(tpl,container); var marker = { lat : coordinates[1], lon : coordinates[0], label : { message: tpl.innerHTML, show: true, showOnMouseOver: true }, style : { image: { icon: { anchor: [0.5, 1], anchorXUnits: 'fraction', anchorYUnits: 'fraction', opacity: 0.90, src: 'map-marker-selected.png' } } } }; $scope.markers.push(marker); } }); }); HTML:

{{templateSiteName}}

{{templateSiteAddress}}

Someone please let me know how to fix this.

Thanks, Barry

[craiggoldstone]

Does this help: https://jsfiddle.net/craigsnyders/uvgzr8ze/1/

[bharathnav]

Hi, this is what I was expecting. Please have a look at https://jsfiddle.net/uvgzr8ze/2/