title: Clear selected input in angular bootstrap typeahead
body: <p>I am using <a href="http://angular-ui.github.io/bootstrap/#/typeahead" rel="nofollow">http://angular-ui.github.io/bootstrap/#/typeahead</a> for a simple array lookup example.</p>
  
  <p>I would like to trigger <code>list()</code> when I empty the <code>input</code> field and press enter. Currently I could program another <code>Clear</code> button to do this. But how to allow keypress when the input is empty? I want user to select from the list or clear it only. There should no other values.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="plunker"&gt;
  
  &lt;head&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"&gt;&lt;/script&gt;
    &lt;script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"&gt;&lt;/script&gt;
    &lt;script src="example.js"&gt;&lt;/script&gt;
    &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;script type="text/ng-template" id="customTemplate.html"&gt;
      &lt; a &gt; &lt; img ng - src = "http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}"
      width = "16" &gt; &lt; span bind - html - unsafe = "match.label | typeaheadHighlight:query" &gt; &lt; /span&gt;
    &lt;/a &gt;
    &lt;/script&gt;
    &lt;div class='container-fluid' ng-controller="TypeaheadCtrl"&gt;
  
      &lt;h4&gt;Static arrays&lt;/h4&gt;
      &lt;pre&gt;Model: {{selected | json}}&lt;/pre&gt;
      &lt;input type="text" typeahead-on-select="list()" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control"&gt;
      &lt;button ng-click="clear()"&gt;Clear&lt;/button&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>angular.module('plunker', ['ui.bootstrap']);
  function TypeaheadCtrl($scope, $http) {
  
    $scope.selected = undefined;
    $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'];
  
    $scope.list = function() {
      alert($scope.selected);
    }
  
    $scope.clear = function() {
      $scope.selected = undefined;
      $scope.list();
    }
  }
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/roushmavR67rhXTJNc8K?p=preview" rel="nofollow">http://plnkr.co/edit/roushmavR67rhXTJNc8K?p=preview</a></p>