title: accessing values from a controller to directive which is having local scope
body: <p>i have a directive(with local scope) and a controller. If i want to access the students data from the controller to the directive, how do i need to do it ? below is the code.
  My purpose is to build a chart which shows the details of students who were absent and present and when the user clicks on the absent/present i should be able to show a table with the details of it.</p>
  
  <p>JS</p>
  
  <pre><code> app.directive('hcPieChart', function () {
                      return {
                          restrict: 'E',
                          template: '&lt;div&gt;&lt;/div&gt;',
                          scope: {
                              title: '@',
                              data: '='
                          },
                          link: function (scope, element,attrs) {
                              Highcharts.chart(element[0], {
                                  chart: {
                                      type: 'pie',
                                      spacingTop: 30,
                                       width: 300,
                                      height: 250,
  
                                  },
                                  title: {
                                              text: ''
                                          },
  
                                  plotOptions: {
                                      pie: {
  
                                          allowPointSelect: true,
                                          cursor: 'pointer',
                                          showInLegend: true,
                                          dataLabels: {
                                              enabled: false,
                                              format: '&lt;b&gt;{point.name}&lt;/b&gt;: {point.percentage:.1f} %'
                                          },
      events: {
                                              click: function(event) 
                                              {
  
      how can i access the student details from the controller to this function ? i want to use the click to call a rest service (inside the controller ).
  
                                  },
  
                                  series: [{
                                      data: scope.data
                                  }]
                              });
                          }
                      };
                  })
  
      app.controller('myCtrl', ['$scope','$http','DTOptionsBuilder', 'DTColumnBuilder',function($scope,$http,DTOptionsBuilder, DTColumnBuilder)
  
      {
      $scope.showTableDetails=function(x,typeOfData){
              $scope.showTableDetailsData="";
              $scope.showTableName="";
              $scope.checkAnomaly=    false;
              if(typeOfData==1){
                  dataCatagory="total";
                  $scope.checkAnomaly==false;
              }else if(typeOfData==2){
                  dataCatagory="present";
                  $scope.checkAnomaly==false;
              }else if(typeOfData==3){
                  dataCatagory="absent";
                  $scope.checkAnomaly==false;
              }
                  $http.get('http://localhost/rest/tripsStatus/studentdetails/'+x.tripDetails.tripId+'/'+dataCatagory+'/am').
              then(function(result) {
                      $scope.showTableDetailsData = result.data.messages[0].data.studentDetails;
                      $scope.showTableName=x.tripDetails.tripName;
  
                  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div ng-app="myApp" ng-controller="myCtrl"&gt;
             &lt;div ng-repeat="x in data track by $index"  style="float:left";&gt;
              &lt;div class="wrapper"&gt;
              &lt;trip-details&gt;&lt;/trip-details&gt;
              &lt;div class="chartdiv"&gt;
              &lt;hc-pie-chart data="showPieChart(x)"&gt;&lt;/hc-pie-chart&gt;
            &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>