title: Angular ng-options - Is there a way to add an option when the model contains a value not present in the options list?
body: <p>When the model, eyeColorUnknown,  contains a value that is not present in the options Angular creates an option with a value of "?" and blank for the visual description as shown below. </p>
  
  <pre><code>&lt;select ng-model="eyeColorUnknown"
      ng-options="option.val as (option.desc + ' - ' + option.val) for option in options | orderBy:'desc'"
      class="ng-pristine ng-valid"&gt;
      &lt;option value="?"&gt;&lt;/option&gt;
      &lt;option value="0"&gt;Blue - 001&lt;/option&gt;
      &lt;option value="1"&gt;Brown - 003&lt;/option&gt;
      &lt;option value="2"&gt;Green - 002&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Is there a way to either:</p>
  
  <p>1) add an option with a value and a description of "value - description" rather than the ?<br>
      For example:
      
          Unknown - 999
          Blue - 001
          Brown - 003
          Green - 002
      </p>
  
  <p>2) Keep the  option but show either a "Uknown" or "val - Unknown"?
      For example:
      </p>
  
  <pre><code>    &lt;option value="?"&gt;Unknown&lt;/option&gt;
      or
      &lt;option value="?"&gt;Unknown - 999&lt;/option&gt;
  
      &lt;option value="0"&gt;Blue - 001&lt;/option&gt;
      &lt;option value="1"&gt;Brown - 003&lt;/option&gt;
      &lt;option value="2"&gt;Green - 002&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>3) Others?</p>
  
  <p>Here is a sample code to help re-create the scenario. The $scope.options are currently static, but will be retrieved using a service which can filter an option out of the set when the expiration date is in the past which can cause this situation to occur. I understand there are some discussion that should occur on the SOA side of the house, but was interested in what possibilities are available in the presentation layer.  </p>
  
  <pre><code>&lt;html ng-app="sampleApp"&gt;
  &lt;head lang="en"&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;HTML Select Demonstration&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.2.0/css/bootstrap.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div ng-controller="sampleAppCtrl"&gt;
          &lt;h1&gt;DEMO of Select and ng-options&lt;/h1&gt;
          &lt;p&gt;&lt;/p&gt;
          &lt;div&gt;
              &lt;select ng-model="eyeColor"
                  ng-options="option.val as (option.desc + ' - ' + option.val) for option in options | orderBy:'desc'"&gt;&lt;/select&gt;
              &lt;span&gt;&amp;nbsp;&amp;nbsp;Value in the model: [{{eyeColor}}]&lt;/span&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;select ng-model="eyeColorUnknown"
                  ng-options="option.val as (option.desc + ' - ' + option.val) for option in options | orderBy:'desc'"&gt;&lt;/select&gt;
              &lt;span&gt;&amp;nbsp;&amp;nbsp;Value in the model: [{{eyeColorUnknown}}]&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="sample_app.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>sample.js</strong></p>
  
  <pre><code>var app = angular.module('sampleApp', []);
  
  (function()
  {
     angular.module('sampleApp').controller('sampleAppCtrl', SampleAppController);
  
     function SampleAppController($scope)
     {
    $scope.eyeColor = "001";
    $scope.eyeColorUnknown = "999";
  
    $scope.options = [ {
       "val": "001",
       "desc": "Blue"
    }, {
       "val": "002",
       "desc": "Green"
    }, {
       "val": "003",
       "desc": "Brown"
    } ];
     }
     ;
  
  })();
  </code></pre>
  
  <p><strong>UPDATE 2015-02-13</strong>:
  The selectDirective provided in angular.js contains a render() method that inserts a '' when the model value doesn't match a value in the options. The angular code excerpt is shown below modified to shown Unknown instead of nothing. I'm looking for suggestions without having to modify the angular.js code. I hope this clarifies my challenge.  </p>
  
  <pre><code>      if (!multiple) {
          if (nullOption || modelValue === null) {
            // insert null option if we have a placeholder, or the model is null
            optionGroups[''].unshift({id:'', label:'', selected:!selectedSet});
          } else if (!selectedSet) {
            // option could not be found, we have to insert the undefined item
            // 
            // WARNING: Modified to show 'Unknown' rather than nothing.
            //  
            optionGroups[''].unshift({id:'?', label:'Unknown', selected:true});
          }
        }
  </code></pre>
  
  <p>Any assistance would be much appreciated.</p>