Angularjs - uib-datepicker in an table - angularjs

Question

I am trying to display an uib-datepicker in a table.
<table ng-table="tableParamsReglement" class="table table-bordered table-hover" id="dynamic-table" >
<tr ng-repeat="activite in $data" >
<td class="text-center" data-title="'Date fin astreinte'" >
<div class="input-group">
<input id="field_dateReglementEffectifClient" type="text" class="form-control" name="dateReglementEffectifClient" uib-datepicker-popup="{{vm.formatDate}}" ng-model="activite.dateReglementEffectifClient"
is-open="vm.datePickerOpenStatus.dateReglementEffectifClient" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.openCalendar('dateReglementEffectifClient')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</td>
</tr>
</table>
Controller :
vm.datePickerOpenStatus = {};
vm.datePickerOpenStatus.dateReglementEffectifClient = false;
vm.openCalendar = function(date) {
vm.datePickerOpenStatus[date] = true;
};
When I click on the calendar button multiple calendars show. And I when I choose a date, it's applied on the last element of my table.
I don't know what I am doing wrong here.

Answer 1

Solved with :
<td class="text-center" data-title="'Date fin astreinte'" >
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{vm.formatDate}}" ng-model="activite.dateReglementEffectifClient"
is-open="activite.isOpen" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.openCalendar($event, activite)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</td>
vm.openCalendar = function($event, activite) {
$event.preventDefault();
$event.stopPropagation();
activite.isOpen = true;
};