jQuery datepicker not working inside ng-repeat in angularjs?

Question

I am using jquery ui date picker in angularjs and it is working fine. But it is not working when datepicker comes inside ng-repeat loop.

<input type="text" class="form-control date_picker" ng-model="date.date" ng-repeat="date in ot.dates">
//Directive
app.directive('otForm', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'app/components/ots/form.html',
        link: function ($scope, form) {
            $(".date_picker").datepicker({
                dateFormat: 'dd-mm-yy',
                prevText: '<i class="fa fa-chevron-left"></i>',
                nextText: '<i class="fa fa-chevron-right"></i>',
                showButtonPanel: false,
                changeYear: true,
                changeMonth: true
            });
        }
    }
})

How can I solve this?

Answer 1

The issue is that your DOM will have multiple <input>s with the class of .date_picker and so your jQuery selector $(".date_picker") is going to return an increasing number of matches as the ng-repeat grows. You really just want your jQuery selector to match the one directive element in your ng-repeat. You are in luck because the link function in a directive passes you the scope and the element itself:

<input type="text" class="form-control date_picker" ng-model="date.date" ng-repeat="date in ot.dates">
//Directive
app.directive('otForm', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'app/components/ots/form.html',
        link: function (scope, element, attrs) {
            $(element).datepicker({
                dateFormat: 'dd-mm-yy',
                prevText: '<i class="fa fa-chevron-left"></i>',
                nextText: '<i class="fa fa-chevron-right"></i>',
                showButtonPanel: false,
                changeYear: true,
                changeMonth: true
            });
        }
    }
})

See the change to the link: line and the immediately following line. I assume you have your directive implemented correctly, but not shown here. You have restrict: 'E' but I don't see a <otForm> in your ng-repeat.