Cómo crear en angular un select con grupos

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <div class="container">
    <h1>Como crear con Angular un select con grupos </h1>
    <h3>Select de html</h3>
    <p>El siguiente select presenta paises, agrupados por continente, utilizando estandar HTML</p>
    <select>
      <option>Seleccione un País</option>
      <optgroup label="América">
        <option>Panamá</option>
        <option>Colombia</option>
        <option>Argentina</option>
      </optgroup>
      <optgroup label="Europa">
        <option>España</option>
        <option>Italia</option>
      </optgroup>
    </select>
    <hr>
    
    <h3>Ahora lo crearemos con Angular a partir de una fuente de datos</h3>
    <p>Tenemos un archivo json con la información de los paises y lo usamos para
      poblar el select
    </p>
    <div ng-app="miapp">
      <div class="dropdown" ng-controller="miCtrl">
           <select class="btn btn-primary">
              <option>Seleccione un País</option>
              <optgroup label= "{{pais.continente}}" ng-repeat="pais in paises">
                <option ng-repeat="n in pais.nombres" ng-click="informa(n)">{{n.nombre}}</option> 
              </optgroup>  
          </select>
           <span>{{mensaje.texto}}</span>
      </div>
    </div>

    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://code.angularjs.org/1.2.9/angular.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

/*(function() {
  "use strict";
  var $btnPais = $("#btnPais");
  $("#menuPais li a ").click(function() {
    var pais = $(this).text();
    $btnPais.text(pais);
  });
})();*/

var app = angular.module("miapp", []);
/*app.controller("miCtrl", function($scope) {
  $scope.paises = [{
    continente: "America",
    nombres: [{
      nombre: "Panamá",
      codigo: "pa"
    }, {
      nombre: "Colombia",
      código: "co"
    }, {
      nombre: "Argentina",
      codigo: "ar"
    }]
  }, {
    continente: "Europa",
    nombres: [{
      nombre: "España",
      codigo: "es"
    }, {
      nombre: "Italia",
      código: "it"
    }]
  }];

  $scope.paisElegido = {
    continente: "",
    nombre: ""
  };


});*/
app.controller("miCtrl",function($scope, $http){
   $http.get('paises.json').success(function(data) {
     $scope.paises=data;
   });
   
   $scope.mensaje= {texto:""};
   
   $scope.informa = function(pais){
     $scope.mensaje.texto="Ha seleccionado " + pais.nombre +
                          ". Su código es: " + pais.codigo +".";
   };
});

[
    {
        "continente": "America",
        "nombres": [
            {
                "nombre": "Panamá",
                "codigo": "pa"
            },
            {
                "nombre": "Colombia",
                "código": "co"
            },
            {
                "nombre": "Argentina",
                "codigo": "ar"
            }
        ]
    },
    {
        "continente": "Europa",
        "nombres": [
            {
                "nombre": "España",
                "codigo": "es"
            },
            {
                "nombre": "Italia",
                "código": "it"
            }
        ]
    }
]