Angular form with select

http://www.karlgjertsen.com

by Karl Gjertsen

HTML

<div ng-controller="MyCtrl">
  <form name="myForm" novalidate>
    <select name="region" 
            ng-model="regionId"
            ng-options="region.id as region.name for region in regions" 
            ng-selected="region.id"
            required>
      <option value="">-- choose a region --</option>
      <input type="submit">
    </select>
  </form>
  <p ng-bind="regionId"></p>
  <hr>
  <span ng-show="myForm.$valid">Form Valid</span>
  <span ng-show="myForm.$invalid">Form Invalid</span>
</div>

JavaScript

function MyCtrl($scope) {

  var myRegions = [
  		{ id: 1, name: "England" }, 
      { id: 2, name: "Wales" }, 
      { id: 3, name: "Northern Ireland" }, 
      { id: 4, name: "Scotland" }
      ];
  $scope.regions = myRegions;
  $scope.regionId = 0;
}