AngularJS - pass parameter from ng-repeat to controller from user directive

Question

I have a custom AngularJS directive that is ng-repeat. In this ng-repeat, I want to pass one element to a function. A function is called, but the element is undefined.

Important: I make my people relax.

//Inside the template
<ul class="list-group" data-ng-repeat="person in persons track by $index">
<li>
... ng-click=fn(person) ...
</li>
</ul>

This is a function that I would like to transfer to a person.

//in outside controller    
$scope.showPerson = function (item) {
    console.log(item) // this is undefined
}

My directive is as follows:

directive('custom', function () {
    return {
        restrict: 'E',
        scope: {
            persons: "=persons",
            fn: "&"
        },
        templateUrl: "/views/templates/persons.html"
    };
});

I invoke my directive as follows:

<custom persons="persons" fn="showPerson()"></custom>

Any ideas why the element is undefined? The only thing I can imagine is the problem of time, because the directive is triggered before the array of people is filled (from the rest of the call).

Answer 1

, , . HTML:

<custom persons="persons" fn="showPerson(x)"></custom>

: x. ( ):

<button ng-click="fn({x: person})" ...>

x - , .