title: Calling a parent scope function from deeply nested directives
body: <p>I have an infinitely nested data structure, where there is a top level object that has a collection of objects, and each of these objects can also have a collection of objects. </p>
  
  <p>I need to iterate through this tree, which I am currently doing like so: </p>
  
  <p>collection.js</p>
  
  <pre><code>app.directive('collection', function() {
    return {
      restrict: 'E',
      replace: true,
      scope: {
        collection: '='
      },
      templateUrl: 'collection.html'
    };
  });
  </code></pre>
  
  <p>collection.html</p>
  
  <pre><code>&lt;ul&gt;
    &lt;member ng-repeat="member in collection" member="member"&gt;&lt;/member&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>member.js</p>
  
  <pre><code>app.directive('member', function($compile) {
    return {
      restrict: 'E',
      replace: true,
      scope: {
        member: '='
      },
      templateUrl: 'member.html',
      link: function(scope, element, attrs) {
        var collection = '&lt;collection collection="member.children"&gt;&lt;/collection&gt;';
  
        if (scope.member.children) {
          $compile(collection)(scope, function(cloned, scope) {
            element.append(cloned);
          });
        }
      }
    };
  });
  </code></pre>
  
  <p>member.html </p>
  
  <pre><code>&lt;li&gt;
    {{ member }} 
  &lt;/li&gt; 
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;div data-ng-controller="collectionController"&gt;
    &lt;collection collection="collection"&gt;&lt;/collection&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need to be able to click on a member, no matter how nested it is, and set the controller's selectedMember property as that member. </p>
  
  <p>so something like this:</p>
  
  <pre><code>app.controller('collectionController', function($scope, collection) {
  
    collection.getCollection().then(function(collection) {
      $scope.collection = collection;
    });
  
    $scope.selectMember = function(member) {
      $scope.selectedMember = member;
    };
  
  });
  </code></pre>
  
  <p>Since I'm calling a function defined in the parent scope (the controller), I think I need to pass down the selectMember function like this:</p>
  
  <p>index.html</p>
  
  <pre><code>...
  &lt;collection collection="collection" select-member="selectMember"&gt;&lt;/collection&gt;
  ...
  </code></pre>
  
  <p>collection.html</p>
  
  <pre><code>&lt;member ng-repeat="member in collection" member="member" 
    select-member="selectMember()" ng-click="selectMember(member)"&gt;
  &lt;/member&gt;
  </code></pre>
  
  <p>collection.js</p>
  
  <pre><code>...
  scope: {
    collection: '=',
    selectMember: '&amp;selectMember'
  }
  ...
  </code></pre>
  
  <p>member.js </p>
  
  <pre><code>...
  scope: {
    member: '=',
    selectMember: '='
  }
  ...
  </code></pre>
  
  <p>I just can't seem to get the function to trigger correctly and set the controller scope's selectedMember property. The parameter passed to the selectMember function is undefined. </p>
  
  <p>I think it's obvious that I'm misunderstanding something about scopes, but the nested nature of the problem I have to solve isn't making things easier. </p>
  
  <p>Any ideas?</p>
  
  <p>Edit:
  Heres a plunker: <a href="http://plnkr.co/edit/JfxpoLLgpADs9RXSMife" rel="nofollow">http://plnkr.co/edit/JfxpoLLgpADs9RXSMife</a></p>