Same Directives multiple times on a page taking last model value always

Question

I am trying to add a copy icon beside each label to copy the text and my code is like below. I am passing the model value of each label as an input to the directive.

When I am clicking on the copy icon, always the last model value is showing why?

Isolating the scope is working . But, I would like to know whats happening internally.

Please explain in detail.

function copytext() {
    var directive = {
        restrict: 'EA',
        template: `
                 <i class="imd imd-content-copy  cursor-pointer"
                    ng-click="click()" ></i>
        `,
        link: function(scope, ele, attrs) {
            scope.click = function() {
                    alert(attrs.data)
            };
        }
    };
    return directive;
}

<label>Job No</label>: {{vm.jobInfo.jobNumber}}
<copytext data="{{vm.jobInfo.jobNumber}}"></copytext>

<label>Customer </label>: {{vm.jobInfo.customerCode}}
<copytext data="{{vm.jobInfo.customerCode}}"></copytext>

<label>Reference</label>: {{vm.jobInfo.reference}}
<copytext data="{{vm.jobInfo.reference}}"></copytext>

Answer 1

<label>Job No</label>: {{vm.jobInfo.jobNumber}}
<copytext data="{{vm.jobInfo.jobNumber}}" onclick="<attr.data=referencevalue>"></copytext>

<label>Customer </label>: {{vm.jobInfo.customerCode}}
<copytext data="{{vm.jobInfo.customerCode}}" onclick="<attr.data=referencevalue>"></copytext>

<label>Reference</label>: {{vm.jobInfo.reference}}
<copytext data="{{vm.jobInfo.reference}}" onclick="<attr.data=referencevalue>"></copytext>

@georgeawg ,The above is just psuedo code, dont think about its syntax. The last html elements data attribute is reference, so all the above elements click handler also takes the reference.. isn't it?