AngularJS ng-repeat model value preassigned

Question

I have below HTML template and some data to show in inputs. I like to show these data in the template when it loads

<div class="panel panel-default" ng-repeat="option in optionslist">
                    <div class="panel-body">
                        <div class="control-group">
                            <label>Airline</label>
                            <select class="form-control" ng-options="airline.id as airline.name for airline in airlinesList"
                                    ng-model="selected.airline" ng-change="selectedAirlines(airline, $index)">
                                <option value="">Choose Airline</option>
                            </select>
                        </div>
                        <div class="control-group">
                            <label>Cost</label>
                            <input type="number" class="form-control" placeholder="Cost" ng-model="selected.cost"
                                   ng-blur="travelCost(cost, $index)">
                        </div>
                        <div class="control-group">
                            <label>Discount</label>
                            <input type="number" class="form-control" placeholder="Discount" ng-model="selected.discount"
                                   ng-blur="travelDiscount(discount, $index)">
                        </div>
                    </div>
                </div>

I want to pre populate below serviceData values in the above template.

$scope.optionslist = [1, 2];
$scope.selected ={};
$scope.serviceData = [
                    {
                        "airline": 3,
                        "cost": 12345,
                        "discount": 3212

                    },
                    {
                        "airline": 1,
                        "cost": 4321,
                        "discount": 213

                    }
                ];

Here is the ng-options list

$scope.airlinesList = [
        {
            "id": 1,
            "name": 'Emirates Airline'
        },
        {
            "id": 2,
            "name": 'Saudi Arabian Airlines'
        },
        {
            "id": 3,
            "name": 'Qatar Airways'
        },
        {
            "id": 4,
            "name": 'AirAsia'
        }
    ];

Answer 1

You're using ng-repeat and binding everything to same selected object. Selected should be an array of objects.

$scope.selected = [{
    "airline": 3,
    "cost": 12345,
    "discount": 3212
  }, {
    "airline": 1,
    "cost": 4321,
    "discount": 213
  }];

If you set the selected array as above it will prepopulate the form if you are binding to the array like this:

 <select class="form-control" ng-options="airline.id as airline.name for airline in airlinesList" 
         ng-model="selected[$index].airline" ng-change="selectedAirlines(airline, $index)">
     <option value="">Choose Airline</option>
 </select>

You need to bind to selected[$index] in each input field you are using.

Here's a plunker example: http://plnkr.co/edit/aLQcU0Y2vgNRUpev66yg?p=preview