title: How do I update the model on click only (angular-strap typeahead and json)
body: <p>I'm having trouble figuring out how to have dynamic data only update when the user selects from the typeahead menu or clicks the search button.</p>
  
  <p>Right now, the dynamic content pertaining to the search query updates automatically when the input value is changed (content disappears). I want the content to stay in view until a new selection has been either clicked in the typeahead list or clicked by the search button.</p>
  
  <p>Any insight at all would be greatly appreciated! Thank you!</p>
  
  <p>Plunker demo:</p>
  
  <p><a href="http://plnkr.co/edit/jVmHwIwJ0KOKCnX6QjVa?p=preview" rel="nofollow">http://plnkr.co/edit/jVmHwIwJ0KOKCnX6QjVa?p=preview</a></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;!-- HTML --&gt;
    &lt;body ng-controller="MainController"&gt;
  
  &lt;!-- Search --&gt;
  &lt;div class="well"&gt;
    &lt;p&gt;Search the term "content"&lt;/p&gt;
    &lt;form role="form"&gt;
      &lt;div class="form-group clearfix search"&gt;
        &lt;input type="text" ng-model="selectedContent" ng-options="query as query.searchQuery for query in searchData" bs-typeahead="bs-typeahead" class="form-control search-field"/&gt;
        &lt;button type="button" class="btn btn-primary search-btn"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;!-- Dynamic Content --&gt;
  &lt;div class="well"&gt;
    &lt;h4&gt;{{ selectedContent.contentTitle }}&lt;/h4&gt;
    &lt;ul&gt;
      &lt;li ng-repeat="item in selectedContent.headlines"&gt;{{item.headline}}&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;!-- typeahead template --&gt;
  &lt;ul class="typeahead dropdown-menu" tabindex="-1" ng-show="$isVisible()" role="select"&gt;
  &lt;li role="presentation" ng-repeat="match in $matches" ng-class="{active: $index == $activeIndex}"&gt;
    &lt;a href="" role="menuitem" tabindex="-1" ng-click="$select($index, $event)" ng-bind="match.label"&gt;&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;!-- JS --&gt;
  var app = angular.module('demoApp', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap'])
  .config(function ($typeaheadProvider) {
    angular.extend($typeaheadProvider.defaults, {
      template: 'ngstrapTypeahead.html',
      container: 'body'
     });
  });
  
  function MainController($scope, $templateCache, $http) {
  
    $scope.selectedContent = '';
  
    $http.get('searchData.json').then(function(response){
      $scope.searchData = response.data;
      return $scope.searchData;
    });
  
  };
  </code></pre>