ng-options

by Marventus

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body ng-app="miApp" ng-controller="MainCtrl">
  <p>
    El usuario seleccionado es: {{usuarioSeleccionado.nombre}} {{usuarioSeleccionado.apellido}}
  </p>
  <select ng-model="usuarioSeleccionado" data-ng-options="usuario.nombre for usuario in usuarios track by usuario.idUsuario" ng-change="logUser()">
  </select>
  <p>El usuario seleccionado es: {{usuarioSeleccionado}}
  </p>

JavaScript

var app = angular.module('miApp', []);
app.controller('MainCtrl', function($scope) {
  $scope.usuarios = [{
    idUsuario: 34,
    nombre: "Juan",
    apellido: "Gonzalez",
    rol: "Admin"
  }, {
    idUsuario: 46,
    nombre: "Ana",
    apellido: "Morales",
    rol: "Admin"

  }, {
    idUsuario: 62,
    nombre: "Sara",
    apellido: "Diaz",
    rol: "User"
  }, {
    idUsuario: 18,
    nombre: "Marcos",
    apellido: "Ortega",
    rol: "User"
  }];
  $scope.logUser = function() {
    console.log($scope.usuarioSeleccionado);
  };
  $scope.usuarioSeleccionado = null;
});