AngularJS directive inside a D3 tip, is this possible? If so, how can I make this work?

Currently working on a program that goes through an array of addresses and pins the location using its longitude and latitude values.
When hovering over one of these pins, I am displaying the address information in a table using D3-tip.

Since D3-tip takes in HTML created from a JS string, I was hoping to create the HTML in a separate directive and call it from the JS string to make it easier to modify and gain all the other benefits of angular – in a tooltip, like this:

JS Main

var tip = d3.tip()
        .attr('class', 'd3-tip-style')
        .html(function(d) { 
                return getTooltipString(d);
            });

function getTooltipString(node){
    var tr = $compile("<tooltip></tooltip>")($scope);
    console.log(tr);
    return tr;
}  

JS Directive

(function(){
    var boxer = angular.module('
    boxer.directive('tooltip', function(){
        return {
            templateUrl: "views/addressTooltip.html",
            controller: function($scope, $rootScope) {

            }
       }   
   })
})()

HTML

<div class='d3-tip-address'>
    <p>HI</p>
</div>

How it looks

The text “HI” should appear in the blank tooltip above the green circle.

I have searched online and given it a go and have also tried other angular methods such as {{test}} (with other relevant code) but had no luck.

  • Is it possible to insert angularJS into the html tags of a D3-tip and
    have it work?
  • If so, is it possible to insert a directive in there?
  • Finally… How?

P.S. I’m quite new to all of this and been thrown into it all so the answer could be simple!