with angular I clone my fields like this

```
$scope.edu_rows = [0];
var edu_counter = 0;

$scope.cloneEduRow = function () {
    edu_counter++;

    if ($scope.edu_rows.length === 10)
        alert('Entry limit reached!');
    else {
        $scope.edu_rows.push(edu_counter);
    }

};

$scope.removeEduRow = function (rowIndex) {
    $scope.edu_rows.splice(rowIndex, 1);
};

```

through a ng-repeat

```
<div data-ng-repeat="row in edu_rows">
                        <div class="col-md-15 form-group row">
                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="edu[@{{ $index }}][school]"
                                       placeholder="School">
                            </div>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" name="edu[@{{ $index }}][teaching]"
                                       placeholder="Teaching">
                            </div>
                            <div class="col-md-2">
                                <div class="input-group date">
                                    <input type="text" class="form-control" name="edu[@{{ $index }}][start_date]"
                                           placeholder="Start Date">
                                    <span class="input-group-addon">
                                        <span class="fa fa-calendar"></span>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="input-group date">
                                    <input type="text" class="form-control" name="edu[@{{ $index }}][end_date]"
                                           placeholder="End Date">
                                    <span class="input-group-addon">
                                        <span class="fa fa-calendar"></span>
                                    </span>
                                </div>
                            </div>
                            <a class="btn btn-icon white col-sm-1 pull-right" data-ng-click="removeEduRow($index)">
                                <i class="fa fa-remove"></i>
                            </a>
                        </div>
                    </div>

```

in the bottom of my view I iniate datetimepicker

```
$(".date").datetimepicker({
        viewMode: 'years',
        format:   'MM/YYYY',
        icons:    {
            time:     'fa fa-clock-o',
            date:     'fa fa-calendar',
            up:       'fa fa-chevron-up',
            down:     'fa fa-chevron-down',
            previous: 'fa fa-chevron-left',
            next:     'fa fa-chevron-right',
            today:    'fa fa-screenshot',
            clear:    'fa fa-trash',
            close:    'fa fa-remove'
        }
    });

```

but this only works for the first row, added rows don't get the plugin, I tried using focus: `$(document).on("focus", ".date", function () {`

but that didnt work, putting it in my angular controller kinda works, it iniates it for the previous added row after pressing the button, but yet not for the currently added row.

Help appreciated.