Dynamic ng-model with ng-repeat

Question

I would like to create dynamically some input fields, that I used ng-repeat with ng-model . I meet some problems. ng-model without ng-repeat works correctly ( transitPointStart ). transits should work exactly the same, but they don't. What am I missing? (link to plunker on the bottom)

transitPointStart:

       <div class="col-lg-6">
                <div class="form-group">
                    <label class="control-label" for="field_start">Start Point</label>
                    <input type="text" class="form-control" name="field_start" id="field_start"
                           ng-model="transitPointStart.city" placeholder="e.g. London"
                    />
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label class="control-label" for="field_start_date">Date</label>
                    <div class="input-group">
                        <input id="field_start_date" type="text" class="form-control" placeholder="YYYY-MM-DD HH:MM"
                               name="field_start_date"
                               datetime-picker="{{dateformat}}" ng-model="transitPointStart.date"
                               is-open="datePickerOpenStatus.field_start_date"
                        />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default"
                                    ng-click="openCalendar('field_start_date')"><i
                                class="glyphicon glyphicon-calendar"></i></button>
                        </span>
                    </div>
                </div>
            </div>

transits:

 <div class="row" ng-repeat="transit in transits">

            <!--TEST-->
            <!--<div> Model: {{transit.modelName}} </div>-->
            <!--<div> dateModel: {{transit.dateModelName}} </div>-->
            <!--<div> datePicker: {{transit.datePickerName}} </div>-->
            <!--<div> fieldName: {{transit.fieldName}} </div>-->
            <!--<div> fieldDateName: {{transit.fieldDateName}} </div>-->
            <!--<div> button: {{transit.buttonDateName}} </div>-->
            <!--/TEST-->

            <div class="col-lg-6">
                <div class="form-group">
                    <label class="control-label" for="transit.fieldName">Transit {{$index+1}}</label>
                    <input type="text" class="form-control" name="transit.fieldName" id="transit.fieldName"
                           ng-model="transit.modelName" placeholder="transit"
                    />
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label class="control-label" for="transit.fieldDateName">Date {{$index+1}}</label>
                    <div class="input-group">
                        <input id="transit.fieldDateName" type="text" class="form-control" placeholder="e.g"
                               name="transit.fieldDateName"
                               datetime-picker="{{dateformat}}" ng-model="transit.dateModelName"
                               is-open="transit.datePickerName"
                        />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default"
                                    ng-click="transit.buttonDateName"><i
                                class="glyphicon glyphicon-calendar"></i></button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-2"></div>
            <div class="col-lg-2">
                <span class="btn btn-primary" ng-click="addTransit()" ng-if="transits.length < 3">Add transit</span>
            </div>
            <div class="col-lg-2"></div>
        </div>

controller:

 $scope.transits = [];

    $scope.addTransit = function () {
        var tempId = $scope.transits.length + 1;
        var tempName = "transitPoint_" + tempId;
        var tempModelName = tempName + ".city"; // Here I would like to have access to transitPoint.city
        var tempDateName = tempName + ".date";  // as above (transitPoint.date)
        var tempDate = "datePickerOpenStatus.field_transit_date_" + tempId;
        var tempFieldName = "field_transit_" + tempId;
        var tempFieldDateName = "field_transit_date_" + tempId;
        var tempButton = "openCalendar('" + tempFieldDateName + "')";
        $scope.transits.push({
            modelName: tempModelName,
            dateModelName: tempDateName,
            datePickerName: tempDate,
            fieldName: tempFieldName,
            fieldDateName: tempFieldDateName,
            buttonDateName: tempButton
        });
    }
    /*
    {...} - rest of code, sending queries (vm.save() ect.)
    */
    $scope.datePickerOpenStatus = {};
    $scope.datePickerOpenStatus.field_start_date = false;
    $scope.datePickerOpenStatus.field_end_date = false;
    // I should've used loop here
    $scope.datePickerOpenStatus.field_transit_date_1 = false;
    $scope.datePickerOpenStatus.field_transit_date_2 = false;
    $scope.datePickerOpenStatus.field_transit_date_3 = false;

    $scope.openCalendar = function (date) {
        $scope.datePickerOpenStatus[date] = true;
    };

Demo: Plunker

Answer 1

Some of the bindings in your HTML are not correct. You need to use interpolation (the {{ }} format) whenever you need to emit data from the model into the HTML.

For example, when assigning IDs, you have:

<input id="transit.fieldDateName" type="text" class="form-control" placeholder="e.g" name="transit.fieldDateName" ...

This should be:

<input id="{{transit.fieldDateName}}" type="text" class="form-control" placeholder="e.g" name="{{transit.fieldDateName}}" ...

Second, your ng-click syntax is not correct. You should not create the openCalendar expression in JavaScript, but in your HTML, like so:

<button type="button" class="btn btn-default" ng-click="openCalendar(transit.fieldDateName)">

I think your Plnkr is missing some scripts and/or steps to make the calendar work, but these changes will at least cause your openCalendar function to get called.