title: Angularjs text / data not showing up
body: <p>I am building a very basic angular app to learn. My app basically loads a list of users and prints them all out on the home page with a checkbox next to each name and also displays the number of present users. </p>
  
  <p>The list of users appears to work - I have 11 users and 11 checkboxes show up. HOWEVER, the actual text doesn't show up. The <code>users.length</code> variable also shows up as empty too. </p>
  
  <p>Here is my <code>core.js</code> file:</p>
  
  <pre><code>var userApp = angular.module('userApp', []);
  userApp.controller("mainController", mainController);
  
  function mainController($scope, $http) {
      $scope.formData = [];
  
      // when landing on the page, get all users and show them
      $http.get('/api/users')
          .success(function(data) {
              $scope.users = data;
              console.log(data);
              console.log(data.length);
          })
          .error(function(data) {
              console.log('Error: ' + data);
          });
  
  
      // when submitting the add form, send the text to the node API
      $scope.createUser = function() {
          $http.post('/api/users', $scope.formData)
              .success(function(data) {
                  $scope.formData = {} //clear the form so our user is ready to enter another user
                  $scope.users = data;
                  console.log(data);
              })
              .error(function(data) {
                  console.log('Error: ' + data);
              });
      };
  
  }
  </code></pre>
  
  <p>And here is my <code>index.html</code> file:</p>
  
  <pre><code>&lt;html ng-app="userApp"&gt;
  &lt;head&gt;
      &lt;!-- META --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;&lt;!-- Optimize mobile viewport --&gt;
  
      &lt;title&gt;Node/Angular Todo App&lt;/title&gt;
  
      &lt;!-- SCROLLS --&gt;
      &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"&gt;&lt;!-- load bootstrap --&gt;
      &lt;style&gt;
          html                    { overflow-y:scroll; }
          body                    { padding-top:50px; }
      &lt;/style&gt;
  
      &lt;!-- SPELLS --&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;&lt;!-- load jquery --&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"&gt;&lt;/script&gt;&lt;!-- load angular --&gt;
      &lt;script src="core.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body ng-controller="mainController"&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="jumbotron text-center"&gt;
              &lt;h1&gt;Users Count: &lt;span class="label label-info"&gt; {{ users.length }}&lt;/span&gt;&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div id="user-list" class="row"&gt;
              &lt;div class="col-sm-4 col-sm-offset-4"&gt;
  
                  &lt;!-- loop over users --&gt;
                  &lt;div class="checkbox" ng-repeat="user in users"&gt;
                      &lt;label&gt;
                          &lt;input type="checkbox"&gt;{{ user.first_name }}
                      &lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- create users --&gt;
          &lt;div id="user-form" class="row"&gt;
              &lt;div class="col-sm-8 col-sm-offset-2 text-center"&gt;
                  &lt;form&gt;
                      &lt;div class="form-group"&gt;
  
                          &lt;!-- BIND THIS VALUE TO formData.text IN ANGULAR --&gt;
                          &lt;input type="text" class="form-control input-lg text-center" placeholder="I want to buy a puppy that will love me forever" ng-model="formData.text"&gt;
                      &lt;/div&gt;
  
                      &lt;!-- createUser() WILL CREATE NEW USERS --&gt;
                      &lt;button type="submit" class="btn btn-primary btn-lg" ng-click="createUser()"&gt;Add&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Sample user record:</p>
  
  <pre><code>{
  "id": 1,
  "first_name": "Bruce",
  "last_name": "Lee",
  "email": "blee@email.com",
  "password": "blee",
  "created_at": "2016-01-08T21:49:18.337Z",
  "updated_at": "2016-01-08T21:49:18.337Z"
  },
  </code></pre>
  
  <p>The data also properly console.log()'s. </p>
  
  <p>Can someone help?</p>
  
  <p>Thanks in advance!</p>