Angular Cascading Select

Example of cascading select boxes in Angular

by Sajeetharan Sinnathurai

HTML

<div ng-app="myApp" ng-controller="myController">
    <select id="categories" 
    data-ng-model="category"        
    data-ng-options="category for category in data"></select>
    <select id="item"         
    data-ng-model="item"         
    data-ng-options="item for item in data[category]"></select>
    {{category}}: {{item}}</div>

JavaScript

(function (window) {
    var app = angular.module("myApp", []);
    app.controller("myController", ['$scope', function ($scope) {
        $scope.data = ['shapes', 'colors', 'sizes'];
        $scope.data.shapes = ['square', 'circle', 'ellipse'];
        $scope.data.colors = ['red', 'green', 'blue'];
        $scope.data.sizes = ['small', 'medium', 'large'];
        $scope.category = 'colors';
        $scope.$watch('category', function () {
            $scope.item = $scope.data[$scope.category][0];
        });
    }]);
})(this);