TypeError: object is not a function - fetching collection data using Angular / rails

Question

ok this is the last question from today's angular learning trilogy:

part1

part2

I get the following error (when trying to select a user in the field of view:

TypeError: object is not a function at Object.source (http://localhost:3000/assets/angular.js?body=1:6300:13) at getMatchesAsync (http://localhost:3000/assets/angular-ui-bootstrap.js?body=1:1820:30) at http://localhost:3000/assets/angular-ui-bootstrap.js?body=1:1871:13 at http://localhost:3000/assets/angular.js?body=1:12030:15 at Array.forEach (native) at forEach (http://localhost:3000/assets/angular.js?body=1:134:11) at $setViewValue (http://localhost:3000/assets/angular.js?body=1:12029:5) at http://localhost:3000/assets/angular.js?body=1:11423:14 at Object.Scope.$eval (http://localhost:3000/assets/angular.js?body=1:7994:28) at Object.Scope.$apply (http://localhost:3000/assets/angular.js?body=1:8074:23) angular.js?body=1:5688 (anonymous function) angular.js?body=1:5688 (anonymous function) angular.js?body=1:4785 Scope.$apply angular.js?body=1:8076 listener angular.js?body=1:11422 jQuery.event.dispatch jquery.js?body=1:5096 elemData.handle 

with this code (updated according to SO answers:

  <div ng-app='users'> <div class='container-fluid' ng-controller="UsersIndexCtrl"> <pre>Model: {{result | json}}</pre> <input type="text" ng-model="result" typeahead="suggestion for suggestion in users($viewValue)"> </div> <script> var app = angular.module('users', ['ui.bootstrap', 'ngResource']); app.factory('User', function($resource) { return $resource("users/:id", { id: '@id' }, { index: { method: 'GET', isArray: true, responseType: 'json' }, show: { method: 'GET', responseType: 'json' }, update: { method: 'PUT', responseType: 'json' } }); }) var UsersIndexCtrl = function($scope, User) { $scope.users = User.index(); }; </script> 

I am trying to extract all users from the server using typeahead.

The latest version of plunker code is here

Questions: 1. How to get collection data from the server and make typeahead using angular and change this code? 2. What does this error mean and how is it related to this code.

Answer 1

Your problem is not your index function, but the typeahead directive. This is what you want (assuming you want to search using the name property on the User resource:

 <div ng-app='users'> <div class='container-fluid' ng-controller="UsersIndexCtrl"> <pre>Model: {{result | json}}</pre> <input type="text" ng-model="result" typeahead="user.name for user in users | filter:$viewValue"> </div> </div> 

I edited your plunker here to make your example work :)