Get rid of blank entry in select tag

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 1

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