События множественного клика выполняются, когда на странице используется несколько директив angularjs

Question

Я пытаюсь выполнить лог c в контроллере, когда в директиве (диаграмме) происходит нажатие event. В частности, я хочу захватить event data, чтобы понять, какой пользователь щелкнул на диаграмме, и отфильтровать с помощью этого другие диаграммы (перекрестная фильтрация между диаграммами).

После того, как я добавил директиву click event handler in, я вижу этот щелчок event выполняется два раза (по количеству графиков на странице). Я пробовал разные вещи, чтобы решить это самостоятельно (щелчок отмены привязки перед щелчком привязки, директива уничтожения), ничего из этого не сработало.

Вот мой код директивы:

function dmChart(datamatic, $timeout) {
var directive = {
  link: link,
  restrict: 'EA',
  scope: {
    chartId: '@',
    data: '=',
    height: '=',
    width: '=?'
  }
};
return directive;

function link(scope, element, attrs, ctrl) {
  var chart = null;

  function initChart() {
    chart = datamatic.chart(scope.chartId, {
      width: scope.width ? scope.width : 680,
      height: scope.height ? scope.height : 450
    });
    chart.render(element[0]).then(function(){
      chart.setData(scope.data);
      chart.on("click", function(ev) {
        scope.$emit('chart.click', ev);
      });
      registerWatch();
    })
  }

  $timeout(function(){
    initChart();
  }, 0);

  function registerWatch() {
    scope.$watch('data', function(newVal, oldVal) {
      if (typeof newVal !== 'undefined') {
        $timeout(function(){
          chart.setData(scope.data);
        }, 0);
      }
    });
  }


}

Вот скрипка, где воспроизводится проблема? https://jsfiddle.net/7nzLtc5h/