Ng-model not working on dynamically added html controls

Question

I am trying to preselect the selects with same ng-model but when I add an item in $scope.alertConditions.rows the selects are not pre-selected based on ng-model. Any help is appreciated.

HTML:

<div class="alert_center_table_body" ng-repeat="alertCondition in alertConditions.rows track by $index">
            <div></div>
            <div>
                <select ng-model="alertConditions.run_alert" ng-change="getRunDates(alertConditions.run_alert, $index)">
                    <option ng-repeat="run_alert in runAlerts" value="{{run_alert.id}}">{{run_alert.value}}</option>
                </select>
            </div>
            <div>
                <select ng-model="alertConditions.run_date" ng-disabled="alertConditions.run_alert == -1">
                    <option value="0" ng-if="alertConditions.run_alert == -1">Daily</option>
                    <option ng-repeat="run_date in runDates" value="{{run_date.id}}" ng-if="alertConditions.run_alert != -1">{{run_date.value}}</option>
                </select>
            </div>
            <div>
                <select ng-model="alertConditions.attribute" ng-options="operator.id as operator.value for operator in operators"><option value=""></option></select>
            </div>
            <div>
                <select ng-model="alertCondition.attribute_member" ng-options="operator.id as operator.value for operator in operators"><option value=""></option></select>
            </div>
            <div ng-if="alert_type == 2">
                <input type="number" ng-model="alertCondition.count_of_period" />
            </div>
            <div>
                <select ng-model="alertConditions.measure">
                    <option ng-repeat="measure in measures" value="{{measure.measure_id}}">{{measure.friendlyname}}</option>
                </select>
            </div>
            <div ng-if="alert_type == 1">
                <select ng-model="alertCondition.operator" ng-options="operator.id as operator.value for operator in operators"><option value=""></option></select>
            </div>
            <div ng-if="alert_type == 2">
                <select ng-model="alertCondition.type" ng-options="type.id as type.value for type in types"><option value=""></option></select>
            </div>
            <div>
                <input type="number" ng-model="alertCondition.value" />
            </div>
            <div>
                <select ng-model="alertCondition.format" ng-options="format.id as format.value for format in formats"><option value=""></option></select>
            </div>
            <div>
                <button ng-click="updateRow($index);"><span class="glyphicon glyphicon-floppy-open"></span><span class="hidden-xs"> Update</span></button>
                <button ng-click="removeRow($index);"><span class="glyphicon glyphicon-trash"></span><span class="hidden-xs"> Remove</span></button>
            </div>
        </div>

controller:

$scope.alertConditions = {
        run_alert: 0,
        run_date: null,
        measure: 'M0002',
        attribute: null,
        rows:[{
            attribute_member: null,
            count_of_period: null,
            operator: 1,
            type: 1,
            value: '',
            format: 1
        }]
    }
$scope.addRow = function(){


    $scope.alertConditions.rows.push({
        attribute_member: null,
        count_of_period: null,
        operator: 1,
        type: 1,
        value: '',
        format: 1
    });
}

Thanks in advance.

Answer 1

You have to use the select in this way if you want to have the preselected item. use the "ng-options " instead of 'ng-repeat"

ng-option Angular

like this :

<select ng-model="modelColor" ng-options="color.name for color in listColor">
</select>

And the model must reference your object list :

scope.listColor = [{name:"blue"}, {name:"red"}];
//Reference the first item in the list
// So, the selected item will be, the first element (blue)
scope.modelColor = scope.listColor[0];

Hope is help you ;)