Question: I have a number of items that get their data from a Json object and populate it using angular.

```
<select ng-model="MyCtrl.cargoList">
    <option ng-repeat="cargo in MyCtrl.cargoList">{{ cargo.name }}</option>
</select>

```

And whenever I load the form, I get something like this in my console:

```
<select ng-model="MyCtrl.cargoList">
    <option value="? object:25 "?></option>
    <option value="">Gloves</option>
    <option value="">Jacket</option>
    <option value="">Shoes</option>
</select>

```

I can get the values to appear just fine, but I can't seem to get rid of the very first option. I don't mind the select box showing the very first element in the list, but I don't want it to be a blank line. How do I get rid of it?

Answer: 
You need to select 1st option by default on `ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name"` & `ng-model` name should not be same as that of your `cargoList`.

**Markup**

```
<select ng-model="MyCtrl.selectedCargo" ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name">
    <option ng-repeat="cargo in MyCtrl.cargoList" value="cargo.name">{{ cargo.name }}</option>
</select>

```

[**Demo Plunkr**](http://plnkr.co/edit/FVGvFK4qDL431LRsP4Dk?p=preview)
Use ng-options instead of ng-repeat

```
 <select ng-model="MyCtrl.selectedListItem" ng-options="cargo for cargo in MyCtrl.cargoList"></select>

```

You can fine tune the labels/values further if you like, check the documentation here - <https://docs.angularjs.org/api/ng/directive/ngOptions>

You can ng-init, or set the first value to defualt, something like

```
MyCtrl.selectedListItem = MyCtrl.cargoList[0]

```

So if you want a function to detect you have changed the value of the select you would use ng-change like so :

```
<select ng-model="MyCtrl.selectedListItem" ng-options="cargo for cargo in MyCtrl.cargoList" ng-change="selectChanged"></select>

```

In your controller 

```
$scope.selectChanged = function(){
 //apply your logic
};

```