looking for a specific element of the page rendered by an ngRepeat loop

Question

I'm trying to build a date picker, here is my code:

<div class="container-fluid">
<div class="content mCustomScrollbar" style="text-align: left;">
        <table>
            <tr ng-repeat="item in reservation" >
                <td>
                    <h5><b>{{item.label}}</b></h5>
                </td>
                <td width="120px">

                </td>
                <td >
                    <div ng-show='(item.type=="text")||(item.type=="email")'>

                    </div>
                    <div ng-show='(item.type=="date")' datefield>
                        <input type="text" id="datepicker"> 
                    </div>
                </td>
            </tr>
        </table>

   </div>
</div> 

the problem is that the input is located inside ng-repeat iteration, And because of this it isn't working. I have looked in some places over the web for similar: http://blogs.4ward.it/angularjs-call-a-js-function-after-repeat-ends-its-loop/ and also: ng-repeat finish event

how can I call $( "#datepicker" ).datepicker(); ? I've tried to do:

x.directive("datefield", function(){
return {
    restrict: "A",
    link: function(scope, element, attrs){
            //alert($("#datepicker").attr('id'));
            $( "#datepicker" ).datepicker();
    }
}

});

the alert is working but the assignment of .datepicker(); doesn't.

Answer 1

Don't use $( "#datepicker" ) in your link function as it is going to target the element with id datepicker and you have repeated that id.

Use

link: function(scope, element, attrs){
        $(element).datepicker();
}