I made this fiddle that solves your problem. Its a pretty simple use of ngRepeat
& $scope
, and that is all.
Adding the code, as suggested
The JS part is;
var app = angular.module('App', [])
.controller('MainCtrl', ['$scope', function ($scope) {
$scope.mins = [100, 200, 300, 400];
$scope.maxs = [200, 300, 400, 500];
$scope.getMxRange = function () {
var arr = [];
if ($scope.minVal) {
angular.forEach($scope.maxs, function (maxVal) {
if ($scope.minVal < maxVal) {
this.push(maxVal);
}
}, arr);
}
else {
arr = $scope.maxs;
}
return arr;
};
}]);
And ofcourse, the HTML looks something like;
<div ng-app="App" ng-controller="MainCtrl">
<select ng-model="minVal">
<option ng-repeat="min in mins" value="{{min}}">{{min}}</option>
</select>
<select>
<option ng-repeat="max in getMxRange()" value="{{max}}">{{max}}</option>
</select>
</div>
I believe the code is pretty self explanatory. The ngModel
minVal
contains the selected minimum value. and the getMxRange
method returns all values in maxs
which are greater than the value of the selected option in the range of minimum values.