<!DOCTYPE html>
<html ng-app="app">
<head>
  <meta charset="utf-8">
  <title>ee</title>
  <script type="text/javascript" src="angular.min.js"></script>
</head>
<body>

<form name="temp_form" ng-controller="c16">
  <div>
    学制：
    <select ng-model="a" ng-options="v.id as v.name for v in a_data" ng-change="a_change(a)">
      <option value="">--请选择--</option>
    </select>
    <span> {{a_show}} </span>
  </div>
  <div>
    班级：
    <select ng-model="b" ng-options="v.id as v.name group by v.group for v in b_data" ng-change="b_change(b)">
      <option value="">--请选择--</option>
    </select>
    <span> {{b_show}} </span>
  </div>
</form>

<script type="text/javascript">
  var app = angular.module("app", []);
  app.controller("c16", ['$scope', function($scope) {
    $scope.a_data = [
      {id :"1001", name :'小学'},
      {id :"1002", name :'初中'},
      {id :"1003", name :'高中'},
    ];
    $scope.a_show = '';
    $scope.b_show = '';
    $scope.a_change = function(a) {
      $scope.a_show = "您的选择是：" + a;
    }
    $scope.b_data = [
      {id :"2001", name :'小学', group:"一年级"},
      {id :"2002", name :'小学', group:"一年级"},
      {id :"2003", name :'小学', group:"一年级"},
      {id :"2004", name :'初中', group:"二年级"},
      {id :"2005", name :'初中', group:"二年级"},
      {id :"2006", name :'高中'},
      {id :"2007", name :'初中', group:"三年级"},
    ];
    $scope.b_change = function(b) {
      $scope.b_show = "您的选择是：" + b;
    }
  }])
</script>

</body>
</html>