Disabling click/select on certain options in dropdown depending on a condition
<p>HTML (view side):</p>

<pre><code>&lt;select ng-model="selectedValue" ng-change="updateSelectedValue(selectedValue)"&gt;
    &lt;option value="1"&gt;1&lt;/option&gt;
    &lt;option value="2"&gt;2&lt;/option&gt;
    &lt;option value="3"&gt;3&lt;/option&gt;
    &lt;option value="4"&gt;4&lt;/option&gt;
    &lt;option value="5"&gt;5&lt;/option&gt;
    &lt;option value="6"&gt;6&lt;/option&gt;
    &lt;option value="7"&gt;7&lt;/option&gt;
    &lt;option value="8"&gt;8&lt;/option&gt;
    &lt;option value="9"&gt;9&lt;/option&gt;
    &lt;option value="10"&gt;10&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>controller side:</p>

<pre><code>$scope.availValue = product.qty //It's dynamic, getting updated on an API call

$scope.updateSelectedValue = function(currentSelectedValue) {
    if(currentSelectedValue &gt; $scope.availValue) {
      //write code such that if this condition is true than do not let the user click/select options whose value is greater than $scope.availValue, i.e. disable those options
      //just display all options but do not let the user click/select   those options whose value is exceeding $scope.availValue
    }
};
</code></pre>

<p>Example: </p>

<pre><code>     $scope.selectedValue = 7;

     $scope.availVal = 4;
</code></pre>

<p>Expected Output: Display all 10 options but do not let the user click/select options having values more than 4.</p>