title: Angular dropdown add option to fetched data
body: <p>I've been looking around on SO for quite some time, but none of the even remotely close questions to mine seem to contain an answer to this.</p>
  
  <p><strong>The situation is the following:</strong></p>
  
  <p>I'm populating a dropdown (or select, as you wish) using AngularJS (^1.6.2) with data fetched from the database. This data is put in this select using <code>ng-options</code> with everything correctly being set and all. </p>
  
  <p>What I'm trying to achieve is that a <code>NULL</code> option gets added to this list of options, but <strong>not</strong> to the <code>$scope</code> object containing the fetched data.</p>
  
  <p>I'll clarify with some code:</p>
  
  <pre><code>&lt;select ng-options="item as item.name for item in items track by item.id" 
          ng-model="forms.formDataObject.item"&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>This generates a list of options, something like this:</p>
  
  <pre><code>&lt;select ...&gt;
    &lt;option value="1"&gt;Item 1&lt;/option&gt;
    &lt;option value="2"&gt;Item 2&lt;/option&gt;
    &lt;option value="3"&gt;Item 3&lt;/option&gt;
    ...
  &lt;/select&gt;
  </code></pre>
  
  <p>I've tried to add a <code>NULL</code> option to this dropdown using the following Angular filter:</p>
  
  <pre><code>app.filter('addNullOption', () =&gt; {
      return (input) =&gt; {
          if (!input[0].null_option) {
              var emptyObj = angular.copy(input[0]);
  
              Object.keys(emptyObj).forEach((key) =&gt; {
                  emptyObj[key] = null;
              });
  
              emptyObj.null_option = true;
  
              input.unshift(emptyObj);
          }
          return input;
      };
  })
  </code></pre>
  
  <p>And then applying the filter in the <code>ng-options</code> as you would with other filters.</p>
  
  <p>This works, but adds the <code>NULL</code> option to the <code>$scope</code> object, instead of it only being available in the <code>$scope</code> of this dropdown. I don't want this to happen, because other dropdowns throughout the application use the same <code>$scope</code> object for populating the dropdown, and they <strong>shouldn't</strong> have this <code>NULL</code> option available.</p>
  
  <p>To recapitulate, this is my question: I would like to be able to add a <code>NULL</code> option to a pre-populated dropdown, <strong>only</strong> in the <code>$scope</code> of that specific dropdown.</p>
  
  <p>Can anyone guide me in the right direction? </p>