En la primera unidad ya vimos como usar el tag <select> mediante la directiva ng-model. Lo que vamos a ver ahora es como rellenar todas sus opciones automáticamente a partir de los datos del $scope. Es algo parecido al tag ng-repeat que acabamos de ver y para ello se utiliza la directiva ng-options

Antes de aplicar la directiva deberemos tener una variable en nuestro $scope con el array de datos a mostrar en el <select>.

app.controller("PruebaController", function($scope) {
  $scope.provincias=[
    {
      idProvincia:2,
      nombre:"Castellón"
    },
    {
      idProvincia:3,
      nombre:"Alicante"
    },
    {
      idProvincia:1,
      nombre:"Valencia"
    },
    {
      idProvincia:7,
      nombre:"Teruel"
    },  
    {
      idProvincia:5,
      nombre:"Tarragona"
    }
  ];
    
  $scope.miProvinciaSeleccionada=null

});

• Línea 2 : Hemos definido la variable provincias con el array de provincias a mostrar en el tag <select>.
• Línea 25: Propiedad miProvinciaSeleccionada asociada al <select> mediante ng-model y que es donde se guardará el valor seleccionado en el <select>. Los más importante es que contendrá el objeto correspondiente a la provincia que se ha seleccionado y no solo su idProvincia.

Ahora que ya tenemos el modelo, pasemos a ver como usar la directiva ng-options.La forma es un poco compleja:

”valor as etiqueta for item in items track by claveunica”

Siendo:

• items:La propiedad del $scope que contiene el array de elementos a mostrar en el <select>.
• item:Es la declaración de una variable que contendrá cada uno de los elementos de items. Este valor puede ser cualquier texto que decidamos.
• valor: Una expresión que use la variable item que será el valor que se asignará al modelo del <select>. Es nuestro caso será el objeto entero.
• etiqueta: Una expresión que use la variable item que será la etiqueta que se mostrará en cada uno de los <option>.
• claveunica: La propiedad que es clave única

En nuestro ejemplo quedará de la siguiente forma:

<select ng-model="miProvinciaSeleccionada" ng-options="provincia as provincia.nombre for provincia in provincias track by provincia.idProvincia" >
  <option value="">--Elige opcion--</option>
</select>

• La lista de todos los valores se obtiene de provincias.
• Cada una de los elementos los referenciamos como provincia.
• La etiqueta de cada uno de los <option> es provincia.nombre.
• El valor que se asignará a la variable provincia del ng-model es la propia variable provincia de cada uno de los elementos.
• La clave única es provincia.idProvincia

Otra forma de ver como funciona la directiva ng-options:

”provincia as provincia.nombre for provincia in provincias”

sería con el siguiente pseudocódigo en Java:

for(Provincia provincia:provincias) {
  valor=provincia;
  etiqueta=provincia.nombre;
}

• select