title: AngularJS - call listener of directive on click and pass data to it
body: <p>So, I was working with directives in AngularJS. What I want to achieve is that call the listener of the directive on the click of a button and pass it some data from the controller.</p>
  
  <h3>Here's my directive (example)</h3>
  
  <pre><code>app.directive('graphVisualization', function() {
      var containerid = document.getElementById('left-graph-container');
      return {
          restrict: 'A',
          scope: {
            data: '=',
            val: '=',
          },
          link: function(scope, element, attrs) {
              scope.$watch('data', function(newVal, oldVal) {
                  //listener code
              })
          }
      }
  </code></pre>
  
  <h3>Here's my HTML</h3>
  
  <pre><code>&lt;div graph-visualization data="graphdata" val="stability"&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;input type="button" value="Call" ng-click="setData(6)" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>And here's my controller</h3>
  
  <pre><code>app.controller('MainCtrl', ['$scope', function() {
      $scope.graphdata = ['time1', 'time2', 'time3'];
      $scope.setData() = function(val) {
          $scope.data = val;
          //now call the directive's listener code i.e. 'link' function and pass it '$scope.data'
      }
  }])
  </code></pre>
  
  <p>So, I need to pass <code>$scope.data</code> from the controller to the directive and then run the code of the <code>link</code> function using that data. What I'm doing in the listener code is rendering a graph using D3 and I want to re-render that graph using the data sent each time I click the button. How do I go about this? </p>