Cascade select using AngularJs

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  
    var data=[
    {"Product":[
                {"ProductId":11, "Name":"Surface" },
                 {"ProductId":12, "Name":"iPad 999" }]
    ,"CategoryId":0, "Name":"電腦平板" },
    
     {"Product":[
                 {"ProductId":13, "Name":"Mony Nex-5R" },
                 {"ProductId":14, "Name":"Pana GF5" }]
    ,"CategoryId":1, "Name":"數位攝影"},
    
      {"Product":[
                 {"ProductId":15, "Name":"iPhone 999" },
                 {"ProductId":16, "Name":"Note -999" }]
    ,"CategoryId":2, "Name":"手機"} 
      
      ] ;
  

 /*可以使用ajax的方式取得Remote data
   $http.get('/Handler/GetSubjectAssignCategory.ashx?lv=1&r=' + Math.random().toString()).success(function (data) {
   $scope.Category1 = data;});
 */
    $scope.Category1= data;
    $scope.$watch('Category1Val', function (newValue) {
  /*可以使用ajax的方式取得Remote data
    $http.get('/Handler/GetSubjectAssignCategory.ashx?lv=2&cate=' + encodeURI(newValue) + '&r=' + Math.random().toString()).success(function (data) {
    $scope.Category2Val = data;});
  */
    $scope.Category2Val = $scope.Category1.Product[0];//對應組的第一個

  })


});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" data-semver="1.0.7"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">

                <select id="CategoryL1" runat="server" ng-model="Category1Val" ng-options="Category1Val.Name for Category1Val in Category1">
                            <option value=''>Select</option>
                        </select>
                        <select id="CategoryL2" runat="server" ng-model="Category2Val" ng-options="Category2Val.Name for Category2Val in Category1Val.Product">
                            <option value=''>Select</option>
                        </select>

  </body>

</html>

/* Put your css in here */