Select default option not working with Ionic Frame

Question

I am using Ionic Framework.
I would like to enter the first option as the default, but doing it this way does not work.
What can I do?

<select ng-model="newSpesaAereo.valuta">
    <option ng-selected="selected">Euro</option>
    <option>Dollaro</option>
    <option>Dollaro canadese</option>
    <option>Sterlina</option>
</select>

If I analyze the page with Google Chrome Developer Utility I watch this.

If I edit this HTML and I delete the selected row, then Euro is visible.

Why is this happening?

Answer 1

You need to use ng-selected instead of just selected.

https://docs.angularjs.org/api/ng/directive/ngSelected

<select ng-model="newSpesaAereo.metodoPagamento">
  <option ng-selected="selected">Carta di credito</option>
  <option>Bancomat</option>
  <option>Contanti</option>
  <option>Altro</option>
</select>

Answer 2

The reason the default option isn't working is because, in your controller, you've likely initialised your form model like so:

$scope.newSpesaAereo = {}

If you want to set default form options, you should also set them in the form model. For example, set 'valuta' to 'Euro' like so:

 $scope.newSpesaAereo = { valuta: "Euro" }

I hope this helps!

P.S when posting issues like this you should also include the code for the controller that the view is bound to.

Answer 3

Set ng-selected="true".

Example:

<option ng-selected="true">Carta di credito</option>