How can i manipulate the select options by angularjs

I have following problem, I have 3 select fields(generated by ngOptions) with few options(100,200,300). For example options with width for top, sides, bottom, (this widths are the same in this fields) and i have 2 conditions:

The width top can't be greater then sides width (so if width sides is 100, top width can be equal from 0 to 100).
the width bottom can be greater then sides (so if width sides is 100, the bottom width can be more then 100)

and after choice i need to have access to this assigned values from select fields.

I have to do this in angularjs by directive.

angular.module('myApp', [])
.controller('Ctrl', function($scope) {
    $scope.widths = [{ width: 300 }, { width: 500 }, { width: 400 }];
});

<html ng-app="myApp">
<head>
	<title></title>
</head>
<body>
<div ng-controller="Ctrl">
  
        <select ng-model="player" ng-options="w.width for w in widths track by w.width" id="top"></select>
        <select ng-model="player2" ng-options="w.width for w in widths track by w.width" id="sides"></select>
        <select ng-model="player3" ng-options="w.width for w in widths track by w.width" id="bottom"></select>
    </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </body>
  </html>

Solution

You can use a function to return options in ng-select . You can access the variables as $scope.player, $scope.player1, $scope.player2 as you've already defined. Make sure to initialize the three variables to a default value(otherwise its undefined and shows as a blank option in the dropdown)

angular.module('myApp', [])
.controller('Ctrl', function($scope) {
    $scope.widths = [{ width: 300 }, { width: 500 }, { width: 400 }];
    $scope.getTopOptions = function () {
                var ret = [];
                if (!$scope.player2) {
                    return $scope.widths;
                }
                angular.forEach($scope.widths, function (width) {
                    if (width.width <= $scope.player2.width) {
                        ret.push(width);
                    }
                });
                return ret;
            };

            $scope.getBottomOptions = function(){
                var ret = [];
                if(!$scope.player2){
                    return $scope.widths;
                }
                angular.forEach($scope.widths, function (width) {
                    if (width.width > $scope.player2.width) {
                        ret.push(width);
                    }
                });
                return ret;

            }
});

<html ng-app="myApp">
<head>
	<title></title>
</head>
<body>
<div ng-controller="Ctrl">
  
        <select ng-model="player" ng-options="w.width for w in getTopOptions() track by w.width" id="top"></select>
        <select ng-model="player2" ng-options="w.width for w in widths track by w.width" id="sides"></select>
        <select ng-model="player3" ng-options="w.width for w in getBottomOptions() track by w.width" id="bottom"></select>
    </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </body>
  </html>