Dynamically added using angular bootstrap date-time-picker not working

I have used date time picker . It works fine when i use it as static. how to make it works, when i add the input fields dynamically. Html

<div class="form-group" ng-repeat="item in items">
        <div class="row" style="margin: 15px 0px;">
            <div class="col-md-6 col-lg-6 col-sm-6" style="padding-left:0">

                <label>Start Date</label>
                <p class="input-group">
                    <input type="text" class="form-control" datetime-picker="dd/MM/yyyy" enable-time="false" ng-model="item['start_date'+$index]" is-open="['start_date'+$index].open"  />

                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="openCalendar($event, 'start_date',$index)"><i class="fa fa-calendar"></i></button>
                    </span>
                </p>

            </div>
      </div>
</div>
    <button ng-click="add()">Add New Row</button>

controller

          $scope.items = [];
    $scope.add = function() {
        $scope.items.push({
            start_date:"",
        });
    }
    $scope.openCalendar = function(e,picker,index) {
        console.log('index',index);
           console.log('picker',picker);
        var picker_index=picker+index;
        console.log($scope[picker_index])
        $scope.[picker_index]open = true;
        console.log( $scope[picker][index])
    };

plunker here

i am not able to open the particular datepicker using index value from the ng-model and is-open attribute. since the datepickers are adding dynamically. can anyone please help me on this.


ANSWERS:


Create new variable for every isOpen and make it true for ng-click. See it it helps Updated the plunkr

 <div class="form-group" ng-repeat="item in items">
    <div class="row" style="margin: 15px 0px;">
        <div class="col-md-6 col-lg-6 col-sm-6" style="padding-left:0">

            <label>Start Date</label>
            <p class="input-group">
                <input type="text" class="form-control" datetime-picker="dd/MM/yyyy" enable-time="false" ng-model="item['start_date'+$index]" is-open="isOpen1"  />

                <span class="input-group-btn">
                    <button type="button" class="btn btn-default"  ng-click="isOpen1= true")"><i class="fa fa-calendar"></i></button>
                </span>
            </p>

        </div>
  </div>

Add New Row

var app = angular.module('app', ['ui.bootstrap', 'ui.bootstrap.datetimepicker']);

app.controller('MyController', ['$scope', function($scope) {

// $scope.openCalendar = function(e,index, picker) {
//   console.log('index',index)
//   $scope.isOpen1.index=false;
//   // $scope[picker][index].open = true;
// };
    $scope.items = [];
    $scope.add = function() {
        $scope.items.push({
            start_date:"",


        });
    }

}]);



 MORE:


 ? how can i use "SystemJsNgModuleLoader" in angular 2 to import dynamic modules to app?
 ? ngModule import module for entire app?
 ? Angular 2 build error - '../@angular/platform-browser-dynamic' no exported member 'bootstrap'
 ? Angular 2 Login Module with template
 ? PHP Array, Dynamic Array Name or Other Technique
 ? PHP Array, Dynamic Array Name or Other Technique
 ? PHP Array, Dynamic Array Name or Other Technique
 ? Building a multidimensional array dynamically from another array with PHP?
 ? Counting rows/records in a multidimensional array
 ? Php dynamic array name