title: How to fetch index data in Angular using rails server
body: <p>I am starting with Angularjs + rails backend and trying to fetch users data from the server - equivalent to to <code>controller/index</code> action in rails.</p>
  
  <p>I have followed several tutorials and found this code as the most clear one....</p>
  
  <p><strong>questions</strong>
  1. How to properly link angular module into views ? 
  2. How to fetch data using typeahead and sample data in this post.</p>
  
  <p>here is <a href="http://plnkr.co/edit/NovQxb0a7013GQDFgsvk?p=preview" rel="nofollow">plunker version of the code</a></p>
  
  <p>Code is as follows:</p>
  
  <p><strong>views</strong></p>
  
  <pre><code>&lt;div ng-app='users'&gt;
    &lt;div class='container-fluid' ng-controller="UsersIndexCtrl"&gt;
      &lt;pre&gt;Model: {{result | json}}&lt;/pre&gt;
      &lt;input type="text" ng-model="result" typeahead="suggestion for suggestion in users($viewValue)"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>controller</strong></p>
  
  <pre><code>&lt;script&gt;
  
    // ['ui.bootstrap', 'ngResource'])
  
   var app = angular.module('users', ['ui.bootstrap', 'ngResource']);
  
  
   // factory - resources users
   // equivalent to rails users/index
            app.factory('Users', function($resource) {
                return $resource('/users.json', {}, {
                    index: { method: 'GET', isArray: true}
                });
            });
  
   // factory - user resource
   // equivalent to users show, update
            app.factory('User', function($resource) {
                return $resource('/users/:user_id.json', {}, {
                    show: { method: 'GET' },
                    update: { method: 'PUT' }
                });
            });
  
  // controller - users/ index
  // equivalent to rails controller rails/index
  
    var UsersIndexCtrl = function($scope, users) {
  
        $scope.users = users;
    };
  
  &lt;/script&gt;
  </code></pre>
  
  <p>and I am stack here, as I am getting this error: </p>
  
  <pre><code>Error: Unknown provider: usersProvider &lt;- users
  </code></pre>
  
  <p>The goal of this code is to use typehead and provide data to the user.</p>
  
  <p>My '/users.json' url is as follows: </p>
  
  <pre><code>[{"full_name":"Lia Cartwright","id":1,"image_url":"no-icon.jpg"},{"full_name":"Hilton Turner","id":2,"image_url":"no-icon.jpg"},{"full_name":"Aubrey Barrows","id":3,"image_url":"no-icon.jpg"},{"full_name":"Donnie Kris","id":4,"image_url":"no-icon.jpg"},{"full_name":"Eryn Rath","id":5,"image_url":"no-icon.jpg"},{"full_name":"Caden Fay","id":6,"image_url":"no-icon.jpg"},{"full_name":"Arlie Tromp","id":7,"image_url":"no-icon.jpg"},{"full_name":"Rico Klein","id":8,"image_url":"no-icon.jpg"},{"full_name":"Gudrun Dare","id":9,"image_url":"no-icon.jpg"},{"full_name":"Nathan Langworth","id":10,"image_url":"no-icon.jpg"},{"full_name":"Deanna Stroman","id":11,"image_url":"no-icon.jpg"},{"full_name":"Shania Stroman","id":12,"image_url":"no-icon.jpg"},{"full_name":"Lupe Harvey","id":13,"image_url":"no-icon.jpg"},{"full_name":"Constance Armstrong","id":14,"image_url":"no-icon.jpg"},{"full_name":"Reagan Tremblay","id":15,"image_url":"no-icon.jpg"},{"full_name":"Murray Sipes","id":16,"image_url":"no-icon.jpg"},{"full_name":"Dandre Klocko","id":17,"image_url":"no-icon.jpg"},{"full_name":"Haylee Monahan","id":18,"image_url":"no-icon.jpg"},{"full_name":"Florence Harber","id":19,"image_url":"no-icon.jpg"},{"full_name":"Norberto Hoppe","id":20,"image_url":"no-icon.jpg"}] 
  </code></pre>