How to use $index to set angular ui bootstrap cale

Question

I am using angular-ui bootstrap to set calendar. My question is how to set the is-open property in the ngRepeat iteration with the $index? If set all the same, when user click the calendar, all the calendar would pop up. But the

    is-open="newTestDateOpened + $index"

does not work. So how can I do it? then in the setNewTestDate($event,$index) function i am able to set it as true.

    <div ng-repeat='history in testingHistory'>
        <div class="row">
            <div class="col-sm-2">
                <p class="input-group">
                <input type="text" class="form-control" datepicker-popup="dd-MM-yyyy" ng-model="history.testingDate" is-open="newTestDateOpened + $index" max-date="maxDate" close-text="Close" />
                <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="setNewTestDate($event,$index)"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
                </p>
            </div>
        </div>
    </div>

Answer 1

I've figured out one way by myself. For those who would have similar questions.

Just use JavaScript object.

is-open="existingTestDate['idx'+$index]"
    ... 
ng-click="setExistingTestDate($event,$index)"

Then in the corresponding js file.

$scope.existingTestDate = {};
$scope.setExistingTestDate = function($event,idx) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.existingTestDate['idx'+idx] = true;
};

By this way, you can control the calendar button in a ngRepeat iteration.