Unable to Inject Controller to connect onclick events for Angular Directive
<p>I'm new to Angular and I"m trying to create a global filter controller that will enable the user to add arguments to a D3 chart.  I can't seem to figure out how to connect the <code>global-filter-directive</code> to the <code>metrics-over-time-directive</code></p>

<p>I've tried injecting the both controllers, but I think I'm missing something important about how this should work.</p>

<h3>Objective:</h3>

<p>Allow the users the functionality to toggle checkboxes which then update the D3 chart data by either adding or removing.</p>

<p>Here is my code:  </p>

<h3>My filter directive/controller for the side menu</h3>

<pre><code>  (function GlobalfilterDirective() {

    "use strict";

    angular
        .module("va.challenge.frontend")
        .directive("globalFilterDirective", GlobalFilterDirective);

    /** @ngInject */
    function GlobalFilterDirective() {

        /*
            nv and d3 are defined in index.constants.js as
            injectible dependencies instead as window global
        */

        var config = {
            restrict: "E",
            templateUrl: "app/components/global-filter-directive/global-filter-directive.tmpl.html",
            controller: GlobalFilterController,
            controllerAs: "vm",
            bindToController: true,
            scope: true,
            link: postLink
        };

        return config;

    }

    function postLink(scope, iEl, iAttrs, vm) {

        var dataWatcher = scope.$watch("vm.data", doSomething);

        scope.$on("$destroy", destroyWatchers);

        // iEl.on("click", function (el) {
        //   console.log('click:  ');
        // });

        function doSomething(newValue) {

            // var d3Format = d3.format("05d");
            // var value = newValue[3].value;

            // vm.rawValue = value;
            // vm.formattedValue = d3Format(value);
            //
            // console.log("vm:  ", vm.formattedValue);

            vm.update = function(el){console.log(el)};

        }

        function destroyWatchers() {

            dataWatcher();

        }

    }

    /** @ngInject */
    function GlobalFilterController() {

        var vm = this;

        vm.data = {
          desktop:[{
              label: "Chrome",
              value: true
          }, {
              label: "Firefox",
              value: false
          }, {
              label: "IE",
              value: false
          }, {
              label: "Safari",
              value: false
          }],
          mobile:[{
            label: "Chrome",
            value: "false"
          },{
            label: "Android Webkit",
            value: false
          },{
            label: "Safari",
            value: false
          }],
          metrics:[{
            label: "Impressions",
            value: "false",
          },{
            label: "Click Through Rate",
            value: false
          },{
            label: "Clicks",
            value: false
          },{
            label: "25% Rate",
            value: false
          },{
            label: "50% Rate",
            value: false
          },{
            label: "75% Rate",
            value: false
          },{
            label: "Completion Rate",
            value: false
          },{
            label: "First Quartile",
            value: false
          },{
            label: "Midpoint",
            value: false
          },{
            label: "Third Quartile",
            value: false
          },{
            label: "Completions",
            value: false
          }]
        };
    }
   })();
</code></pre>

D3 Charts for User selections/views

<pre><code>  /*
    Global Directive that will display all possible browsers and metrics
  */
  (function MetricsOverTimeDirective() {

    "use strict";

    angular
        .module("va.challenge.frontend")
        .directive("overTimeDirective", OverTimeDirective);

    /** @ngInject */
    function OverTimeDirective() {

        /*
            nv and d3 are defined in index.constants.js as
            injectible dependencies instead as window global
        */

        var config = {
            restrict: "E",
            templateUrl: "app/components/metrics-over-time-directive/metrics-over-time-directive.tmpl.html",
            controller: OverTimeController,
            controllerAs: "vm",
            bindToController: true,
            scope: true
            // link: postLink
        };

        return config;

    }

    /** @ngInject */
    function OverTimeController(MockAPI, d3, nv) {
        var data;

        var margin = {top: 20, right: 80, bottom: 30, left: 50},
                      width = 960 - margin.left - margin.right,
                      height = 500 - margin.top - margin.bottom;
        var format = d3.time.format("%d-%b-%y");
        var numberFormat = d3.time.format(",");
        var json = { browser: ["chrome", "firefox", "ie", "safari",
                    "chrome-mobile", "androidwebkit"]
                  };
        var userSelections = ['chrome'];
        var user = function(){ console.log('clicked')};

        //Data request to API provider
        MockAPI.get(json).then( function(json) {
            data = json;
            var dates = [];

          nv.addGraph(function() {
              var chart = nv.models.lineChart()
              .useInteractiveGuideline(true)
              .color(['#d93344', '#53dbd0', '#9d4dc5', '#5486d1']);
              // .color(d3.scale.category10().range());
              var fitScreen = false;
              var width = 600;
              var height = 300;
              var zoom = 1;

              chart.xAxis
                .axisLabel("Date")
                .tickValues(dates)
                .showMaxMin(false)
                .staggerLabels(true)
                .tickFormat(function(d) {
                    return d3.time.format("%b %d")(new Date(d))
                  }); //removed %Y =&gt; year

              chart.yAxis
                  .axisLabel('Impressions')
                  .tickPadding(10)
                  .staggerLabels(true)
                  .tickFormat(d3.format(',.2f'));

              d3.select('#chart1 svg')
                  .attr('perserveAspectRatio', 'xMinYMid')
                  .attr('width', width)
                  .attr('height', height)
                  .datum(chartData(json));

              setChartViewBox();
              resizeChart();

              nv.utils.windowResize(resizeChart);
              // d3.select('#zoomIn').on('click', zoomIn);
              // d3.select('#zoomOut').on('click', zoomOut);
              function setChartViewBox() {
                  var w = width * zoom,
                      h = height * zoom;
                  chart
                      .interpolate("cardinal")
                      .width(w)
                      .height(h);
                  d3.select('#chart1 svg')
                      .attr('viewBox', '0 0 ' + w + ' ' + h)
                      .transition().duration(500)
                      .call(chart);
              }

              function resizeChart() {
                  var container = d3.select('#chart1');
                  var svg = container.select('svg');
                  if (fitScreen) {
                      // resize based on container's width AND HEIGHT
                      var windowSize = nv.utils.windowSize();
                      svg.attr("width", windowSize.width);
                      svg.attr("height", windowSize.height);
                  } else {
                      // resize based on container's width
                      var aspect = chart.width() / chart.height();
                      var targetWidth = parseInt(container.style('width'));
                      svg.attr("width", targetWidth);
                      svg.attr("height", Math.round(targetWidth / aspect));
                  }
                  }
                  return chart;
              });


              function click (e) {
                console.log(e);
              }


              function chartData(json, browers) {
                var vmData = {
                      "first": [],
                      "mid": [],
                      "third": [],
                      "completeImpr": []
                    };
                    dates.push(Date.parse(el.date));
                    if (el.browser === 'chrome') {
                      vmData.mid.push( {
                        "type": el.browser,
                        "y": el.midpointImpressions,
                        "l": "hello",
                        "x": Date.parse(el.date)
                      });
                      vmData.first.push({
                        "type": el.browser,
                        "y": el.firstQuartileImpressions,
                        "l": "hello",
                        "x": Date.parse(el.date)
                      });
                      vmData.third.push( {
                        "type": el.browser,
                        "y": el.thirdQuartileImpressions,
                        "l": "hello",
                        "x": Date.parse(el.date)
                      });
                      vmData.completeImpr.push( {
                          "type": el.browser,
                          "y": el.completeImpressions,
                          "l": "hello",
                          "x": Date.parse(el.date)
                      });
                    }
                  });
                  console.log(vmData);

                  return [
                      {
                        values: vmData.first,
                        key: "firstQuartileImpressions",
                        fill: "#2ca02c"
                      },
                      {
                        values: vmData.mid,
                        key: "midpointImpressions",
                        fill: "pink"
                      },
                      {
                        values: vmData.third,
                        key: "thirdpointImpressions",
                        fill: "orange"
                      },
                      {
                        values: vmData.completeImpr,
                        key: "completeImpressions",
                        fill: "yellow"
                      }
                  ];
              }
              // console.log(data, null, '\t');
          });


    }

   })();
</code></pre>

Global Filter Tmpl

<pre><code>&lt;fieldset class="standard"&gt;
  &lt;legend&gt;Desktop&lt;/legend&gt;
  &lt;ul&gt;
    &lt;li ng-repeat="item in vm.data.desktop"&gt;
      &lt;md-checkbox aria-label="title" ng-onclick="doSomething"&gt;
        {{item.label}}
      &lt;/md-checkbox&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/fieldset&gt;
&lt;fieldset class="standard"&gt;
  &lt;legend&gt;Mobile&lt;/legend&gt;
  &lt;ul&gt;
    &lt;li ng-repeat="item in vm.data.mobile"&gt;
      &lt;md-checkbox aria-label="title" ng-true-value="false"&gt;
        {{item.label}}
      &lt;/md-checkbox&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/fieldset&gt;

&lt;fieldset class="standard"&gt;
  &lt;legend&gt;Metrics&lt;/legend&gt;
  &lt;ul&gt;
    &lt;li ng-repeat="item in vm.data.metrics"&gt;
      &lt;md-checkbox aria-label="title"&gt;
        {{item.label}}
      &lt;/md-checkbox&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/fieldset&gt;
</code></pre>