title: Failed to load template: template/typeahead/typeahead.html in Ruby on rails app
body: <p>I have a running Angular-app in my ruby on rails project and now I want to implement some typeahead search using angular.js and can not find the solution how to make <code>typeahead directive running</code>.</p>
  
  <p>Question: How to install angular typeahead directive into my project ?</p>
  
  <p>With present solution described bellow I am getting this console : </p>
  
  <pre><code>Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/template/typeahead/typeahead.html
  </code></pre>
  
  <ul>
  <li>ng-app is working and related js and css files linked into html as well.</li>
  </ul>
  
  <p>I am following this source: <a href="https://github.com/thierryc/bootstrap-ui-angularjs" rel="noreferrer">bootstrap-ui-angularjs</a></p>
  
  <p>What I did already :</p>
  
  <ol>
  <li>downloaded <code>angular-ui-bootstrap.js</code> into
  <code>public\assets\javascripts</code> directory</li>
  <li><p>manifested asset pipeline as usually:</p>
  
  <p>//= require jquery
  //= require jquery_ujs
  //= require jquery.tokeninput
  //= require bootstrap
  //= require angular
  //= require angular-ui-bootstrap
  //= require_tree .</p></li>
  </ol>
  
  <p>3.checked if <code>js</code> are on the page:(just scripts in question)</p>
  
  <pre><code>&lt;link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="/assets/bootstrap.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/angular.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/assets/angular-ui-bootstrap.js?body=1" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>my ng-app:
  
      &lt;div ng-app='plunker'&gt;
  
        &lt;div class='container-fluid' ng-controller="TypeaheadCtrl"&gt;
          &lt;pre&gt;Model: {{result | json}}&lt;/pre&gt;
          &lt;input type="text" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)"&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;script&gt;
  
      angular.module('plunker', ['ui.bootstrap']);
      function TypeaheadCtrl($scope, $http, limitToFilter) {
  
          //http://www.geobytes.com/free-ajax-cities-jsonp-api.htm
  
          $scope.cities = function(cityName) {
              return $http.jsonp("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK &amp;filter=US&amp;q="+cityName).then(function(response){
                  return limitToFilter(response.data, 15);
              });
          };
  
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Is there something what I am missing in connection to installing existing angular directives? e.g. from <a href="https://github.com/thierryc/bootstrap-ui-angularjs" rel="noreferrer">this link</a></p>