Angular w/ D3

http://angularjs.org/

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.4/d3.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<div my-directive ng-app="myApp">
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.directive('myDirective', function($compile) {
  return {
    restrict: 'A',
    link: function(scope, element, attributes) {
      let svg = d3.select(element[0])
        .append('svg');
      svg.append('text')
        .text('CLICK ME')
        .attr('y', '30')
        .attr('cursor', 'pointer')
        .attr('ng-click', 'showAlert(\'clicked\')');
      let compiledSvg = $compile(svg.node())(scope);
      element[0].children[0].replaceWith(compiledSvg[0]);
      
      scope.showAlert = function(message) {
      	alert(message);
      };
    }
  }
});