I have set up a custom directive called calendar which includes a date picker created in JQuery. To associate the ng-model with the date picker, I am using the following code successfully:
var clickedID = "#" + $scope.indexid + "_datePicker";
$(clickedID).trigger('input');
The issue lies in the fact that $scope.indexid always displays the last value in the array of calendar directives.
For instance, if my variables are represented as follows in the directive:
[
{ indexid: 1},
{ indexid: 2},
{ indexid: 3}
]
Whenever any calendar on the page is clicked, $scope.indexid consistently returns 3 (the final item in the array). What steps can I take to resolve this problem?
Describing this dilemma proves difficult; please feel free to request additional information as needed.
EDIT - Additional code:
//Index Page
<div ng-repeat="item in items">
<calendar indexid="{{$index}}"></calendar>
</div>
//In the Directive
scope: {
ngModel: "=",
indexid: "@"
}
//In Directive Controller
console.log($scope.indexid);
//In the directive template
<input type="text" ng-model="testModel" id="{{::indexid}}"/>