javascript - Ng-model not working on dynamically added html controls -

i trying preselect selects same ng-model when add item in $scope.alertconditions.rows selects not pre-selected based on ng-model. appreciated.

html:

<div class="alert_center_table_body" ng-repeat="alertcondition in alertconditions.rows track $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 operator.value operator in operators"><option value=""></option></select>             </div>             <div>                 <select ng-model="alertcondition.attribute_member" ng-options="operator.id operator.value 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 operator.value operator in operators"><option value=""></option></select>             </div>             <div ng-if="alert_type == 2">                 <select ng-model="alertcondition.type" ng-options="type.id type.value 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 format.value 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.

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

ng-option angular

like :

<select ng-model="modelcolor" ng-options="color.name color in listcolor"> </select> 

and model must reference object list :

scope.listcolor = [{name:"blue"}, {name:"red"}]; //reference first item in list // so, selected item be, first element (blue) scope.modelcolor = scope.listcolor[0]; 

hope ;)