title: Issue with <select ng-options="..." />
body: <p>I tried to achieve a simple feature with AngularJS as below. In item list, when user clicks an item and click the Remove button then the item will be removed.</p>
  
  <p><img src="https://i.stack.imgur.com/fFWfh.png" alt="enter image description here"></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div ng-app="app" ng-controller="MainController"&gt;
      &lt;div&gt;
        &lt;select ng-options="item.name for item in items" ng-model="currentItem" size="5" style="width: 200px"&gt;&lt;/select&gt;
      &lt;/div&gt;
      &lt;button ng-click="removeItem()"&gt;Remove&lt;/button&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>and script is like below:</p>
  
  <pre><code>angular.module('app', [])
    .controller('MainController', function($scope) {
      $scope.items = [{
        name: 'item1'
      }, {
        name: 'item2'
      }, {
        name: 'item3'
      }];
  
      $scope.currentItem = $scope.items[0];
  
      $scope.removeItem = function() {
        var index = $scope.items.indexOf($scope.currentItem);
        $scope.items.splice(index, 1);
      };
  
    });
  </code></pre>
  
  <p>The problem is when I tried to remove an item (i.e. item2), the list always shows an empty item in the first position. When I click 'item1' or 'item3', the empty item disappears.</p>
  
  <p><img src="https://i.stack.imgur.com/WQPxz.png" alt="enter image description here"></p>
  
  <p>I know that this is caused by <code>ng-model="currentItem"</code> in html. The item that currentItem points to get removed, currentItem points to null. So I changed the function removeItem as below to solve this issue.</p>
  
  <pre><code>$scope.removeItem = function() {
        var index = $scope.items.indexOf($scope.currentItem);
        $scope.items.splice(index, 1);
  
        /* PART 1 begin */
        if ($scope.items.length === 0) {
          $scope.currentItem = null;
        } else {
          if (index &gt;= 0 &amp;&amp; index &lt;= $scope.items.length - 1) {
            $scope.currentItem = $scope.items[index];
          } else {
            $scope.currentItem = $scope.items[$scope.items.length - 1];
          }
        }
        /* PART 1 end */
      };
  </code></pre>
  
  <p>I would like to know whether there is any simple way (like a directive) in AngularJS to do the action in PART 1 automatically. </p>