Nesting ng-options inside an ng-repeat

AngularJS : Trying to figure out how to get multiple select elements to show up with the right option values inside them.

HTML

<div ng-app="Test1">
    <div ng-controller="Foo">
      
<b>DYNAMIC<b><br>
    <ul>
        <li ng-repeat="place in test">
            <ul>
                <li class="region">{{place.header}}</li>
                <li class="place" ng-repeat="place in place.places">
                    {{place}}
                </li>
            </ul>
        </li>
    </ul>
        
      
<br><br><b>STATIC<b><br>
THIS IS WHAT I WANT TO ACHIEVE<br>
        <select> 
            <option class="region">Kerala</option>
            <option class="place">Trivandrum</option>
            <option class="place">Kollam</option>
            <option class="region">Chennai</option>
            <option class="place">Kanchipuram</option>
            <option class="place">Guindy</option>
        </select> 
    </div>
</div>

CSS

.region {
    font-weight: bold
}
.place {
    padding-left: 25px;
}

JavaScript

angular.module('Test1',[])

.controller('Foo', function($scope) {

$scope.regionsData = {
  "regions": [
    {
      "regionId": 15,
      "regionName": "Kerala",
      "places": [
        {
          "placeId": 21,
          "placeName": "Trivandrum"
        },
        {
          "placeId": 22,
          "placeName": "Kollam"
        }]
    },
    {
      "regionId": 16,
      "regionName": "Chennai",
      "places": [
        {
          "placeId": 23,
          "placeName": "Kanchipuram"
        },
        {
          "placeId": 24,
          "placeName": "Guindy"
        }]
    }
    ]
}

$scope.test = [];
$scope.regionsData.regions.forEach(function(val, key) {
  var x = {};
  x.header = val.regionName;
  x.places = [];
  val.places.forEach(function(val, key){
    x.places.push(val.placeName);
  })
  $scope.test.push(x);
    console.log(x);
})

});