title: How to remove an empty option after a filter modifies the drop down list in Angular?
body: <p>I'm using Angularjs 1.4.2 and I have to create a drop down list that is a combination of numbers and text.  It is an array of objects with two properties.  So I use numbers as a type of label and convert the 0 value and the -1 values to text as the top and bottom of the list.  </p>
  
  <p>The reason I don't just hard code the text is inside the filter we call a service to change the language of the text for the page, which makes it dynamic for switching languages and hence the reason I opted for a number labeling system for the option entries.</p>
  
  <p>However, I keep getting a blank option in the list and the default "Select Item" text for 0 cannot get pre-selected when the drop down appears.</p>
  
  <p>What I found was that </p>
  
  <blockquote>
    <p>the empty option is generated when a value referenced by ng-model
    doesn't exist in a set of options passed to ng-options</p>
  </blockquote>
  
  <p>In this case, the original list that was put in scope
  has been modified by the filter, so I assume that is why the empty option appears in the drop down list.  </p>
  
  <p>My code works fine without the filter, but when I try to apply the filter, I get this error: 
  <strong>Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!</strong>  </p>
  
  <p>The drop down list does have the correct values from the filter, but the empty option is still there and it is selected instead of the text "Select Item", which is what I want.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="app"&gt;
    &lt;head&gt;
      &lt;script data-require="angular.js@1.4.2" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
     &lt;body&gt;
      &lt;div ng-controller="Test"&gt;
          &lt;p&gt;selected item is : {{selectedItem}}&lt;/p&gt;
        &lt;p&gt; The distance of selected item is : {{selectedItem.distance}} &lt;/p&gt;
        &lt;select ng-model="selectedItem" ng-options="item.distanceSize for item in items | myFilter" ng-init="selectedItem = items[0]"&gt;
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>script.js</strong></p>
  
  <pre><code>var app = angular.module('app',[]);
  
  app.controller('Test',function($scope){
     $scope.items = [{"distance": "0", "distanceSize": 0},{"distance": "25", "distanceSize": 25},{"distance": "50", "distanceSize": 50},{"distance": "-1", "distanceSize": -1}];
  });
  
  app.filter('myFilter', function () {
    return function (items) {
      var valuesArray = [];
              if(items) {
                  for(var i = 0; i &lt; items.length; i++) {
                      var myObject = {};
  
                      if(items[i].distanceSize === 0) {
                          myObject.distanceLabel = "0";
                          myObject.distanceSize = "Select Item";
                          valuesArray.push(myObject);
                      }else if(items[i].distanceSize == 25) {
                          myObject.distanceLabel = "25";
                          myObject.distanceSize = 25;         
                          valuesArray.push(myObject);
                      }
                      else if(items[i].distanceSize == 50) {
                          myObject.distanceLabel = "50";
                          myObject.distanceSize = 50;         
                          valuesArray.push(myObject);
                      }
                      else if(items[i].distanceSize == -1) {
                          myObject.distanceLabel = "-1";
                          myObject.distanceSize = "Select Everything";            
                          valuesArray.push(myObject);
                      }
                  }
              }
              return valuesArray;
    };
  });
  </code></pre>
  
  <p>Since my drop down list is modified by the filter, how to I remove or mask the empty option and why is the filter throwing errors?</p>