Tablas y listas

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="tablas">
  <h1>Tablas y listas</h1>
  <div ng-controller="tablasCtrl">
    <table>
      <tr ng-repeat="n in nombres">
        <td>{{n.nombre}}</td>
        <td>{{n.apellido}}</td>
      </tr>
    </table>
    <br>
    <label>Seleccione un nombre</label>
    <select ng-model="data.seleccionado" ng-options="n.nombre for n in data.opciones">
    </select>
    <br>
    <label>Seleccionado visto como objeto <strong>{{data.seleccionado | json}}</strong></label>
    <label>Seleccionado visto como dato <strong>{{data.seleccionado.nombre}}</strong></label>
  </div>
  <div ng-controller="otro">
    <label class="test">{{test}}</label>
  </div>
</body>

</html>

// Code goes here
var app = angular.module("tablas", []);

app.controller("tablasCtrl", function($scope) {
  $scope.nombres = [{
    nombre: "Nombre Uno",
    apellido: "Apellido uno"
  }, {
    nombre: "Nombre Dos",
    apellido: "Apellido Dos"
  }, {
    nombre: "Nombre Tres",
    apellido: "Apellido Tres"
  }];

  $scope.data = {
    opciones: $scope.nombres,
    seleccionado: $scope.nombres[0]
  };
});
app.controller("otro",function ($scope){
  $scope.test = "Uso de un segundo controlador";
});

/* Styles go here */

table,
th,
td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}

table tr:nth-child(odd) {
  background-color: #f1f1f1;
}

table tr:nth-child(even) {
  background-color: #ffffff;
}
.test{
  font-size: 150%;
}

Uso de tablas y listas
Empleo de ng-options con objetos