Angular Typeahead dropdown opens with empty input

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
    <script src="script.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>
    <div class="container-fluid" ng-controller="TypeaheadCtrl">
      <h4>Typeahead dropdown opens with empty input</h4>
        <input type="text" ng-model="selected" typeahead-empty typeahead="state for state in states | filter:$viewValue" class="form-control" />
    </div>
  </body>

</html>

angular.module('plunker', ['ui.bootstrap'])
    
  .controller('TypeaheadCtrl', function($scope) {
    $scope.selected = '';
    $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
  })
  
  .directive('typeaheadEmpty', function () {
    return {
      require: 'ngModel',
      link: function (scope, element, attr, ctrl) {
       
        element.bind('focus', function(){
          if (ctrl.$viewValue === undefined) {
            return ctrl.$setViewValue(" ");
          }
          if (ctrl.$viewValue.trim() === ""){
            ctrl.$viewValue === "" ? ctrl.$setViewValue(" ") : ctrl.$setViewValue("");
          }
        });
        
        ctrl.$viewChangeListeners.push(function(){
          if (ctrl.$viewValue === undefined) {
            return ctrl.$setViewValue(" ");
          }
          if (ctrl.$viewValue.trim() === ""){
            ctrl.$setViewValue(" "); 
          }
        });
        
      }
    }
  });