typeahead не показывает предложения с bootstrap UI и angularjs

Я хочу отобразить статические предложения в текстовом поле поиска, но ничего не отображается. Я следую этому https://codepen.io/joe-watkins/pen/EagEWv .
Вот мой код.

HTML-код:

 <div>    
    <input type="text" name="questions" id="questionss" class="form-control select2-search search_query" placeholder="what are you looking for ?" ng-model='myquery' typeahead="question for question in questions | filter:$viewValue | limitTo:3" />

    <div class="form-group">
        <button type="button" class="btn btn-primary" ng-click="search()">
          Get an answer ! <i class="fa fa-search"></i>
        </button> 
    </div>

И мой контроллер:

var Questions=["hello","hi","question1","question2","question2"];
$scope.questions=Questions;

1 ответ

  1. Проверьте наличие ошибок в консоли браузера, так как ваш код действительно работает.

    1.Убедитесь, что у вас есть включить все зависимости:

    <link rel="stylesheet prefetch" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
    

    2.Уведомление ng-app="angularTypeahead"в html и:

    var myApp = angular.module("angularTypeahead", ["ui.bootstrap"]);
    

    3.Извещение ng-controller="TypeaheadCtrl"и:

    myApp.controller("TypeaheadCtrl", function($scope) {...});
    

    4.Полный код:

    Вот это full code live demo

    <html>
        <head>
          <link rel="stylesheet prefetch" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
          <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
          <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
        </head>
        
        <body>
          <div ng-app="angularTypeahead">
            <div class="container-fluid" ng-controller="TypeaheadCtrl">
        
              <label for="states">Search for Answer</label>
              <input type="text" name="questions" id="questionss" class="form-control select2-search search_query" placeholder="what are you looking for ?" ng-model='myquery' typeahead="question for question in questions | filter:$viewValue | limitTo:3">
        
              <div class="form-group">
                <button type="button" class="btn btn-primary" ng-click="search()">
                  Get an answer ! <i class="fa fa-search"></i>
                </button>
              </div>
        
        
            </div>
          </div>
          <script type="text/javascript">
            var myApp = angular.module("angularTypeahead", ["ui.bootstrap"]);
        
        
            // setup controller and pass data source
            myApp.controller("TypeaheadCtrl", function($scope) {
        
              var Questions = ["hello", "hi", "question1", "question2", "question2"];
              $scope.questions = Questions;
        
            });
          </script>
        </body>
        
        </html>