title: Angular ng-click's inside a dynamically created d3 chart are not working
body: <p>I'm trying to create a d3 chart using an Angular directive. I manage to create it, but the problem is that I want some ng-click events on the chart elements and I'm not really sure how this should be done.</p>
  
  <p>Here is my directive:</p>
  
  <pre><code>.directive('circleChart', function($parse, $window, $compile) {
          return {
              restrict: 'A',
              scope: {
                  datajson: '='
              },
              link: function(scope, elem, attrs) {
  
                  var circleChart = new CircleChart(scope.datajson);
                  circleChart.initialise(scope);
                  var svg = circleChart.generateGraph();
                  svg = angular.element(svg);
  
                  console.log(svg);
                  //scope.$apply(function() {
                    var content = $compile(svg)(scope);
                    elem.append(content);
                  //});
              }
          }
      });
  </code></pre>
  
  <p>The CircleChart object creates my d3 chart and there is the place I attach an ng-click attribute to the chart elements (doesn't seem to be a proper Angular way of doing it):</p>
  
  <pre><code>var CircleChart = Class.create({
      initialise: function(scope) {
          this.datajson = scope.datajson;
      },
  
      generateGraph: function() {
  
      .............
  
      var chartContent = d3.select("div#chart-content");
  
      var svg = chartContent.append("svg")
          .attr("id", "circle")
          .attr("width", diameter)
          .attr("height", diameter)
          .style("border-radius", "50px")
          .append("g")
          .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
  
        ...............
  
             var circle = svg.selectAll("circle")
                  .data(nodes)
                  .enter().append("circle")
                  .attr("class", function(d) {
                      return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root";
                  })
                  .attr("id", function(d) {
                      return d.id;
                  })
                  .attr("value", function(d) {
                      return d.name
                  })
                  .attr("parent", function(d) {
                      if (d.parent) return d.parent['id']
                  })
                  .attr("ng-click", function(d) {
                      return "getEgs('" + d.id + "')";
                  })
  
      ...............
  </code></pre>
  
  <p>The d3 code is working fine because if I remove the compile code from the directive, the chart gets drawn, but the ng-clicks don't fire.</p>
  
  <p>If I leave the compile code there, it goes into an infinite loop and the browser is building up memory until I have to kill it.</p>
  
  <p>Obviously, my method is not working and it will be awesome if someone can help me out </p>