W jaki sposób tworzyć przy wykorzystaniu angulara dropdowny, które będą od siebie zależne? Stwórzmy prosty kontroler z przykładowymi danymi:

angular.module('shopApp').controller('ProductController', ['$scope', function($scope) {
    $scope.products = {
        'Ice cream': {
            'Chocolate',
            'Vanilla'
        },
        'Pizza' : {
            'Prosciutto',
            'Americana'
        },
        'Cake': {
            'Apple pie',
            'Cheese'
        }
    };
}]);

Następnie przygotujmy widok html:

<script src="~/Scripts/angular/angular.js"></script>
<script src="~/FiltersAngular/app-client.js"></script>
<script src="~/FiltersAngular/productController.js"></script>

<div ng-app="shopApp" ng-controller="ProductController">
        <div class="form-group">          
            <select id="product" ng-model="types" ng-options="product for (product, type) in products">
                <option value=''>Select product</option>
            </select>
        </div>
        <div class="form-group">         
            <select id="type" ng-disabled="!types" ng-model="type" ng-options="type for type in types">
                <option value=''>Select type</option>
            </select>
        </div>
    </div>
</div>

I to wszystko 🙂