Директива AngularJs Typeahead не работает

Question

У меня есть простое требование, в котором отображается список пользователей и отображается кнопка поиска сверху, чтобы искать пользователей по имени, что-то вроде упрощенной страницы ссылок LinkedIn.

Мое веб-приложение разработано на node.js, но эта страница была разработана на angular.js, и для этой кнопки поиска я решил использовать директиву typeahead. Это как файл нефрит выглядит следующим образом:

html(ng-app='geniuses') 
    head 
    title List All Geniuses! 
    link(href='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css', rel='stylesheet') 
    script(src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js') 
    script(src="https://cdn.firebase.com/js/client/2.2.4/firebase.js") 
    script(src="https://cdn.firebase.com/libs/angularfire/1.1.2/angularfire.min.js") 
    script(src='js/listAllgeniuses.js') 
    body 
    div.container 
     div.page-header 
     h2 All Geniuses! 
     div(ng-app='geniuses',ng-controller='SearchAGenius') 
     input.form-control(placeholder='Genius',name='search-genius',ng-model="selected",typeahead="user for user in usersArr | filter:{'geniusid':$viewValue} | limitTo:8") 
     div(ng-app='geniuses',ng-controller='GetAllGeniuses') 
     ul 
      li(ng-repeat='user in users') {{ user.geniusid }} 

Список пользователей является неправдоподобным как массив из firebase. Как вы можете видеть, список пользователей извлекается с помощью контроллера GetAllGeniuses и она отлично работает .. Вот код контроллера:

(function (angular) { 
var app = angular.module('geniuses', ["firebase"]); 

app.controller('GetAllGeniuses', ["$scope", "$rootScope","$firebaseArray", 
    function($scope, $rootScope, $firebaseArray) { 
     var users = $firebaseArray(new Firebase("****)); 
     $rootScope.usersArr = users; 
     $scope.users = users; 
} 
]) 

app.controller('SearchAGenius', ["$scope", "$rootScope", 
    function($scope, $rootScope) { 
     $scope.selected = ''; 
     $scope.usersArr = $rootScope.usersArr; 
} 
]) 

}(angular)); 

Это, как данные выглядят, как (манекен):

[ 
{ 
geniusid: "new", 
geniusname: "" 
}, 
{ 
geniusid: "new", 
geniusname: "" 
}, 
{ 
geniusid: "news", 
geniusname: "" 
}, 
{ 
geniusid: "qazwsx", 
geniusname: "" 
} 
] 

Я хочу поискать гениальность (или имя) в окне поиска ... Я пробовал почти все идеи, размещенные в сети, но не смог понять это.

Любые идеи были бы оценены ,

Answer 1

Отъезд Plunker Я сделал с помощью вашей демонстрации.

Несколько примечаний. Вы хотите включить Angular Bootstrap в свои скрипты и ввести его в свой модуль.

script(src='http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js') 

И

var app = angular.module('geniuses', ["firebase","ui.bootstrap"]); 

Кроме того, не следует использовать $rootScope для передачи данных вокруг. Это префект для углового обслуживания.

Также нет необходимости определять ng-app каждый раз, когда вы собираетесь использовать угловые.

Вот еще один код плункера, который я модифицировал, чтобы получить эту работу.

html(ng-app='geniuses') 
    head 
    title List All Geniuses! 
    link(href='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css', rel='stylesheet') 
    script(src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js') 
    script(src='http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js') 
    script(src="https://cdn.firebase.com/js/client/2.2.4/firebase.js") 
    script(src="https://cdn.firebase.com/libs/angularfire/1.1.2/angularfire.min.js") 
    script(src="./app.js") 

    body 
    div.container 
     div.page-header 
     h2 All Geniuses! 
     div(ng-controller='SearchAGenius') 
     input.form-control(placeholder='Genius',name='search-genius',ng-model="selected",typeahead="user as user.geniusname for user in usersArr | filter:{'geniusid':$viewValue} | limitTo:8") 
     div(ng-controller='GetAllGeniuses') 
     ul 
      li(ng-repeat='user in users') {{ user.geniusid }} 

И JS

(function(angular) { 
    var app = angular.module('geniuses', ["firebase", "ui.bootstrap"]); 

    app.controller('GetAllGeniuses', ["$scope", 'GeniusFactory', 
    function($scope, GeniusFactory) { 

     $scope.users = GeniusFactory.users(); 
    } 
    ]); 

    app.controller('SearchAGenius', ["$scope", 'GeniusFactory', 
    function($scope, GeniusFactory) { 
     $scope.selected = ''; 
     $scope.usersArr = GeniusFactory.users(); 
    } 
    ]); 

    app.factory('GeniusFactory', ["$firebaseArray", function($firebaseArray) { 
    //Create a users object 
    var _users; 

    return { 
     users: users 
    } 

    function users() { 
     //This will cache your users for as long as the application is running. 
     if (!_users) { 
     //_users = $firebaseArray(new Firebase("****")); 
     _users = [{ 
      geniusid: "new", 
      geniusname: "Harry" 
     }, { 
      "geniusid": "new", 
      "geniusname": "Jean" 
     }, { 
      "geniusid": "news", 
      "geniusname": "Mike" 
     }, { 
      "geniusid": "qazwsx", 
      "geniusname": "Lynn" 
     }]; 
     } 
     console.log(_users); 
     return _users; 
    } 
    }]); 
})(angular);