title: AngularJS - pass parameter from ng-repeat to controller from custom directive
body: <p>I have a custom AngularJS directive, which is rendering a ng-repeat. In this ng-repeat I want to pass one element to a function. The function is called, but item is undefined.</p>
  
  <p>Important: I get my persons form a rest-call. </p>
  
  <pre><code>//Inside the template
  &lt;ul class="list-group" data-ng-repeat="person in persons track by $index"&gt;
  &lt;li&gt;
  ... ng-click=fn(person) ...
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This is the function I like to pass the person.</p>
  
  <pre><code>//in outside controller    
  $scope.showPerson = function (item) {
      console.log(item) // this is undefined
  }
  </code></pre>
  
  <p>My directive looks like this:</p>
  
  <pre><code>directive('custom', function () {
      return {
          restrict: 'E',
          scope: {
              persons: "=persons",
              fn: "&amp;"
          },
          templateUrl: "/views/templates/persons.html"
      };
  });
  </code></pre>
  
  <p>I call my directive like this:</p>
  
  <pre><code>&lt;custom persons="persons" fn="showPerson()"&gt;&lt;/custom&gt;
  </code></pre>
  
  <p>Any ideas why item is undefined? The only thing I can imagine is a timing issue, because the directive fires before the array of persons is filled (from the rest call).</p>