Andrewpk/angularChainedSelect.html

## angularChainedSelect.html
<html>
  <head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
  <style>
  /** setup simple styling **/
  .ng-invalid { border: 1px solid red; }
  body { font-family: Arial,Helvetica,sans-serif; }
  body, td, th { font-size: 14px; margin: 0; }
  table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
  a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }
  .error { color: red; }
  #wrapper { margin-top:20%; text-align:center; }
  </style>
  </head>

  <body>
  <script type="text/javascript">
    function SelectController($scope) {
      // The controller is only used to setup a simple data structure
      $scope.sampleProductCategories = [
        {
          "name": "Classic Cars",
            "products": [
            {
              "name": "1948 Porsche 356-A Roadster",
                "options":[
                    {"value": "Color",
                     "options":[
                    {"value": "Red"},
                    {"value":"Black"}
                    ],
                 },
                    {"value":"Seats",
                    "options":[
                    {"value": "Leather"},
                    {"value":"Cloth"}
                    ],

                    },

                   {"value":"Warranty",
                    "options":[
                    {"value": "2 Year"},
                    {"value":"3 Year"}
                    ],

                    }

                ],
              "price": 53.9
            },
            {
              "name": "1948 Porsche Type 356 Roadster",
              "price": 62.16
            },
            {
              "name": "1949 Jaguar XK 120",
              "price": 47.25
            }
          ]

        },
        {
          "name": "Motorcycles",
          "products": [
            {
              "name": "1936 Harley Davidson El Knucklehead",
              "price": 24.23
            },
            {
              "name": "1957 Vespa GS150",
              "price": 32.95
            },
            {
              "name": "1960 BSA Gold Star DBD34",
              "price": 37.32
            }
          ]

        },
        {
          "name": "Planes",
            "products": [
            {
              "name": "1900s Vintage Bi-Plane",
              "price": 34.25
            },
            {
              "name": "1900s Vintage Tri-Plane",
              "price": 36.23
            },
            {
              "name": "1928 British Royal Navy Airplane",
              "price": 66.74
            },
            {
              "name": "1980s Black Hawk Helicopter",
              "price": 77.27
            },
            {
              "name": "ATA: B757-300",
              "price": 59.33
            }
          ]
        }
      ];
    }
  </script>
    <div id="wrapper" ng-app ng-controller="SelectController">
    <!-- super cool angular chained selection control -->
      <select ng-model="category" ng-options="c.name for c in sampleProductCategories"></select>
      <select ng-model="categoryItem" ng-options="p.name for p in category.products"></select>
      <select ng-model="subChild" ng-options="o.value for o in categoryItem.options"></select>
      <select ng-model="level4" ng-options="o.value for o in subChild.options"></select>

      <hr />
      category={{category.name}}<br/>
      product={{categoryItem.name}}<br/>
      subChild={{subChild.value}}<br/>
      level4={{level4.value}}<br/>
    </div>
  </body>
</html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
	<style>
	/ setup simple styling /
	.ng-invalid { border: 1px solid red; }
	body { font-family: Arial,Helvetica,sans-serif; }
	body, td, th { font-size: 14px; margin: 0; }
	table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
	a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }
	.error { color: red; }
	#wrapper { margin-top:20%; text-align:center; }
	</style>
	</head>

	<body>
	<script type="text/javascript">
	function SelectController($scope) {
	// The controller is only used to setup a simple data structure
	$scope.sampleProductCategories = [
	{
	"name": "Classic Cars",
	"products": [
	{
	"name": "1948 Porsche 356-A Roadster",
	"options":[
	{"value": "Color",
	"options":[
	{"value": "Red"},
	{"value":"Black"}
	],
	},
	{"value":"Seats",
	"options":[
	{"value": "Leather"},
	{"value":"Cloth"}
	],

	},

	{"value":"Warranty",
	"options":[
	{"value": "2 Year"},
	{"value":"3 Year"}
	],

	}

	],
	"price": 53.9
	},
	{
	"name": "1948 Porsche Type 356 Roadster",
	"price": 62.16
	},
	{
	"name": "1949 Jaguar XK 120",
	"price": 47.25
	}
	]

	},
	{
	"name": "Motorcycles",
	"products": [
	{
	"name": "1936 Harley Davidson El Knucklehead",
	"price": 24.23
	},
	{
	"name": "1957 Vespa GS150",
	"price": 32.95
	},
	{
	"name": "1960 BSA Gold Star DBD34",
	"price": 37.32
	}
	]

	},
	{
	"name": "Planes",
	"products": [
	{
	"name": "1900s Vintage Bi-Plane",
	"price": 34.25
	},
	{
	"name": "1900s Vintage Tri-Plane",
	"price": 36.23
	},
	{
	"name": "1928 British Royal Navy Airplane",
	"price": 66.74
	},
	{
	"name": "1980s Black Hawk Helicopter",
	"price": 77.27
	},
	{
	"name": "ATA: B757-300",
	"price": 59.33
	}
	]
	}
	];
	}
	</script>
	<div id="wrapper" ng-app ng-controller="SelectController">
	<!-- super cool angular chained selection control -->
	<select ng-model="category" ng-options="c.name for c in sampleProductCategories"></select>
	<select ng-model="categoryItem" ng-options="p.name for p in category.products"></select>
	<select ng-model="subChild" ng-options="o.value for o in categoryItem.options"></select>
	<select ng-model="level4" ng-options="o.value for o in subChild.options"></select>

	<hr />
	category={{category.name}}<br/>
	product={{categoryItem.name}}<br/>
	subChild={{subChild.value}}<br/>
	level4={{level4.value}}<br/>
	</div>
	</body>
	</html>