sibling directives
HTML
<div ng-controller="InfoCtrl">
<select ng-options="type.id as type.name for type in Types" ng-model="selectedType" ng-change="setEnabledSeries(selectedType)"></select>
<select ng-options="series.id as series.name for series in EnabledSeries" ng-model="selectedSeries"></select>
</div>
JavaScript
angular.module('myAppApp', [])
.controller('InfoCtrl', function ($scope, $controller) {
$scope.Types = [{
"id": "dog",
"name": "dog"
}, {
"id": "cat",
"name": "cat"
}, {
"id": "bird",
"name": "bird"
}, {
"id": "turtle",
"name": "turtle"
}];
$scope.Series = [{
"id": "spaghetti",
"name": "spaghetti"
}, {
"id": "eggs",
"name": "eggs"
}];
$scope.setEnabledSeries = function (type) {
console.log(type);
if (type == 'dog' || type == 'bird') {
$scope.EnabledSeries = [{
"id": "spaghetti",
"name": "spaghetti"
}];
} else {
$scope.EnabledSeries = $scope.Series;
}
};
})