title: How can I disable the already selected value from the dropdown using AngularJS?
body: <p>I want to disable the already selected value from the dropdown using <code>ng-options</code> AngularJS.</p>
  <pre><code>&lt;select name=&quot;fruit&quot; ng-model=&quot;selectedFruits&quot; ng-options=&quot;fruit as fruit.name for fruit in fruits&quot;&gt;&lt;/select&gt;
  &lt;button ng-click=&quot;add()&quot;&gt;Add&lt;/button&gt;
  
  $scope.selectedFruits = undefined;
  $scope.finalSelectedFruits = [];
  
  $scope.fruits = [{'name':'banana', 'color':'green'}, 
                   {'name':'apple', 'color':'red'}, 
                   {'name':'mango', 'color':'yellow'}];
  
  $scope.add = function() {
     $scope.model.finalSelectedFruits.push($scope.selectedFruits);
  };
   
  </code></pre>
  <p>Please look at the following image</p>
  <p><img src="https://i.stack.imgur.com/SFHLh.png" alt="enter image description here" /></p>
  <p>You can see <code>mango</code> is already selected. How can disable it in the new dropdown based on the <code>$scope.selectedFruits</code>.</p>
  <p><strong>I don't want to do this within</strong> <code>&lt;options&gt;&lt;/options&gt;</code></p>