title: How to load a new page with AngularJS when a user start typing in an input box
body: <p>My route /search shows a Template and related Controller that are showing a list of entries from my database (properly binding data using from the Controller to the Template using the $scope variable). So if I go to /search it just works and shows data.</p>
  
  <p>Now I have added a search box at the top of my page. When the user starts typing, wherever he is on the website, I would like to show results instantly (showing Template with results).</p>
  
  <p>What is the Angular way to do that? </p>
  
  <hr>
  
  <p><strong>Here is my how I finally did it:</strong></p>
  
  <p>My route:</p>
  
  <pre><code>App.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', { templateUrl: '&lt;%= asset_path "welcome/index.html" %&gt;' });
    $routeProvider.when('/search', { templateUrl: '&lt;%= asset_path "search/index.html" %&gt;', controller: 'SearchController' });
    $routeProvider.otherwise({ redirectTo: '/' });
  }]);
  </code></pre>
  
  <p>The global layout:</p>
  
  <pre><code>&lt;form class="navbar-form navbar-left" role="search" data-ng-controller="SearchController"&gt;
    &lt;div class="form-group"&gt;
      &lt;input type="text" class="form-control" placeholder="search" data-ng-model="query" /&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-default"&gt;Search&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;div data-ng-view&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The Controller:</p>
  
  <pre><code>angular.module('tastyPie.controllers')
  
  .controller('SearchController', function($scope, Search) {
  
    // Bind to the view
    $scope.searchResults = [];
    $scope.query = '';
  
    // if the user is not on the search page and start typing, move him to the search page and perform a search
    $scope.$watch('query', function(new_data, old_data) {
      if (new_data == old_data) return;
  
      if ($location.path().indexOf('/search') &lt; 0)
        $location.path('search');
  
      $scope.search();
    });
  
    $scope.search = function() {
      var s = new Search();
      s.query = $('#query').val();
      s.execute();
    };
  
    // callback from the search services which returns the results
    $scope.$on('searchResults', function(object, results){
      $scope.searchResults = results;
    });
  
  });
  </code></pre>
  
  <p>And the template search/index.html :</p>
  
  <pre><code>&lt;ul class="list-group" ng-init="search()"&gt;
    &lt;li class="list-group-item" ng-repeat="result in searchResults"&gt;
      &lt;strong&gt;{{result.title_texts}}&lt;/strong&gt;
      &lt;br /&gt;
      {{result}}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>