title: AngularJS text suggestion textbox
body: <p>I am working on text suggestion textbox using angularjs.</p>
  
  <p>Below is my page html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" ng-app&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script type="text/javascript" src="Scripts/angular.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="Scripts/angular-mocks.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="BaseCtrl.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="BaseController"&gt;
      &lt;div class="input-group" style="width: 50%;"&gt;
          &lt;input type="text" class="form-control" id="FirstName" ng-model="fnamequery" ng-change="toggleSuggest()"&gt;
          &lt;p ng-repeat="fname in fnames | filter:fnamequery"&gt;{{fname}}&lt;/p&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and here is my controller file BaseCtrl.js:</p>
  
  <pre><code>angular.module('TextApp',[]).controller('BaseController', function($scope, $http) {
  $scope.fnames =  ["Aida", "Aidan", "Alla", "Allen", "Beverly", "Bea", "Caleb", "Catherine"];
  $scope.toggleSuggest = function () {
      console.log($scope.fnamequery);
      if ($scope.fnamequery == '') $('p').hide();
      else $('p').show();
  }
  });
  </code></pre>
  
  <p>In the future I am planning to pull up the names from the database via Web API call, but for now I am just trying to get it to work with hard-coded values. </p>
  
  <p>Now I get all the values shown on the page. The values do get filtered out as I type something in but initially everything gets displayed</p>