title: Directive with isolate scope communicate with controller in AngularJS
body: <p>I've read some similar answers to my question, such as <a href="https://stackoverflow.com/questions/13092720/how-to-pass-data-from-the-isolate-scope-to-the-parent-scope">this one</a> though can't translate it to my own requirements - comes from a lack of understanding...</p>
  
  <p>I have a controller:</p>
  
  <pre><code>appControllers.controller('TransactionsCtrl', ['$scope', 'InfiniteScrollingDataService', function ($scope, dataService) {
      // setup our scope properties
      $scope.$root.title = 'Transactions';
      var urlQuery = {
          skip: 0,
          take: 25,
          search: '',
          order: 'DateTimeCreated',
          orderBy: 'desc',
          transactionTypeID: null,
          transactionStatusID: null
      };
      var apiUrl = 'api/transactions';
      $scope.transactions = new dataService(apiUrl, urlQuery);
  
      $scope.Filter = function (senderParent, type, id) {
          $scope.FilterApplied = true;
          console.log('filter in controller: ' + senderParent + ' ' + type + ' ' + id);
      }
  }]);
  </code></pre>
  
  <p>And I have a directive:</p>
  
  <pre><code>appDirectives.directive('bootstrapListItems', ['$rootScope', function ($rootScope) {
  
      return {
          restrict: 'A',
          templateUrl: 'bootstrapDropDownItems.html',
          link: function (scope, element, attrs) {
  
              scope.type = attrs.useGlobaljsonObject;
              scope.parentElement = attrs.id;
              scope.items = [];
  
              var obj = $rootScope.globalJSON[scope.type];
  
              for (o in obj) {
                  scope.items.push({ key: o, value: obj[o] })
              }
          }       
      }
  
  }]);
  </code></pre>
  
  <p>And the template for my directive:</p>
  
  <pre><code>&lt;script type="text/ng-template" id="bootstrapDropDownItems.html"&gt;
  
      &lt;li class="active"&gt;&lt;a href="#" class="lnkFilterList"&gt;- Any -&lt;/a&gt;&lt;/li&gt;
      &lt;li ng-repeat="item in items"&gt;
          &lt;a href="#" class="lnkFilterList" ng-click="Filter(parentElement, type, item.key)"&gt;{{item.value}}&lt;/a&gt;
      &lt;/li&gt;
  
  &lt;/script&gt;
  </code></pre>
  
  <p>If I don't isolate the scope of the directive then the controller is called correctly, and i see the console logging out my arguments. </p>
  
  <p>However, I (think) I need to isolate the scope as there will be multiples of this directive on the page.</p>
  
  <p>when I add <code>scope: {}</code> to my directive the controller function is no longer called. </p>
  
  <p>I also tried changing my <code>ng-click</code> to <code>ng-click="$parent.Filter(.....)"</code> - that didnt' seem to work either.</p>
  
  <p>Can anybody please point me in the right direction?</p>