AngularJs Typeahead directive not working

Question

I have a simple requirement wherein a list of users is displayed and display a search button on top to search for the users by name, something like a simplified LinkedIn Connections page.

My web app is developed on node.js but this one page has been developed on angular.js and for this search button, I have decided to use the typeahead directive. This is how the jade file looks like:

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 }}

The list of users are being fetched as an array from firebase. As you can see, the list of users is fetched using GetAllGeniuses controller and it works fine.. Here is the controller code:

(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));

This is how the data looks like(dummy):

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

I want to search using the geniusid (or name) in the search box... I have tried almost all ideas posted on the net but haven't been able to figure this out..

Any ideas would be appreciated.

Answer 1

Check out this Plunker I made using your demo.

A few things to note. You'll want to include Angular Bootstrap in your scripts and inject it into your module.

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

And

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

Also, don't use $rootScope to pass data around. This is a prefect use for an angular service.

There's also no need to define ng-app everytime you're going to use angular.

Here's the rest of the plunker code that I modified to get this working.

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 }}

And the 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);