Angular with asp.net

Question

Hi ,

 everyone 

app.directive('example', function () {

return function (scope, element, attrs) {

angular.element(document).ready(function () {

alert("#"+attrs["id"]);

$("#" + attrs["id"]).datepicker({

showOn: 'button',

buttonImageOnly: true,

buttonImage: 'assests/images/calendar.png',

dateFormat: 'dd-mm-yy'

});

//MANIPULATE THE DOM

});

};

});

 and html is-

 

tr ng-repeat="item in delListdate track by $index" id="deltr">

<td>

<input type="hidden" name="item.ProductDeliveryTypeId" ng-model="item.ProductDeliveryTypeId" value="{{item.ProductDeliveryTypeId}}" />

<input type="text" ng-value="item.DeliveryTypes" ng-model="item.Name" class="form-control" ng-attr-id="{{'DeliveryTypes' + item.DeliveryTypes }}" /></td>

<td>

<input type="date" id="{{'DeliveryDates-'+$index}}" ng-model="item.DeliveryDates" class="form-control" />

<%-- <input type="text" id="{{$index}}" example class="form-control xdate" ng-model="item.DeliveryDates" placeholder="DD/MM/YY" id="datePickerItem_{{$index}}" datepicker-popup="shortDate" is-open="opened[$index]" datepicker-options="dateOptions" current-text="Today" clear-text="Clear" close-text="Close" ng-readonly="false" />

<span class="input-group-btn">

<button type="button" class="btn btn-default" ng-click="openDatePicker($event, $index)">

<i class="glyphicon glyphicon-calendar"></i>

</button>

</span>--%>

</td>

</tr>

<tr>

</tr>

 

id is alerted but calender is not showing but i fix the id it working fine and dynmically assign id is not working.