javascript - How to retroactively add a UI Bootstrap Tooltip to some SVG elements? -

on project i'm working on, we've created svg maps. we've got system can information particular location on map our database. i'm working on making ui bootstrap tooltip appear when associated polygon clicked. however, i've found 2 ways don't work.

way doesn't work first, set directive on overarching element, set system bind elements in link function of directive, so:

(function () {     'use strict';      angular.module('app').directive('locationmap', [directive]);      function directive() {         return {             restrict: 'a',             scope: {                 vm: '='             },             link: function(scope, elem) {                 var polygons = elem.find('polygon');                 angular.foreach(polygons, function(current) {                     var currentelement = angular.element(current);                     var id = currentelement.attr('id');                      // function in vm looks                     // given id, , generates useful details.                     // implementation unimportant question.                     var formattedtext = scope.vm.builddetails(id);                      currentelement.attr('tooltip', formattedtext);                     currentelement.attr('tooltip-trigger', 'click');                     // have have work svg.                     currentelement.attr('tooltip-append-to-body', true);                 });             }         }     } })(); 

while code generates valid markup, clicking on svg polygons doesn't anything. further research revealed that's because angular sets events , stuff @ compile time.

so, next attempted implement compile function instead...

compile: function(elem, attrs) {     // same contents link function above. } 

...but doesn't work, because compile not have access scope; have wait until link access scope.

however, if don't @ compile-time, i'm dead in water.

question: in way can set ui bootstrap tooltips on svgs interact on click, detail text coming current scope? have feeling i'm overlooking simple.

when had link function, of way there. needed include $compile service, , use in angular.foreach loop...

(function () {     'use strict';      angular.module('app').directive('locationmap', ['$compile', directive]);      function directive($compile) {         return {             restrict: 'a',             link: function(scope, elem) {                 var polygons = elem.find('polygon');                 angular.foreach(polygons, function(current) {                     var currentelement = angular.element(current);                     var id = currentelement.attr('id');                      currentelement.attr('tooltip', '{{ vm.builddetails(' + id + ') }}');                     currentelement.attr('tooltip-trigger', 'click');                     currentelement.attr('tooltip-append-to-body', true);                      $compile(currentelement)(scope);                 });                             }         }     } })(); 

i did that, , tooltip events working without hitch.