title: Can't consume REST API
body: <p>I have a simple RESTful API set up using Django Rest Framework and I'm trying to use AngularJS to consume it. I've read about controllers and resources in angular and I'm following multiple tutorials, but for some reason in my template I can't seem to access the JSON properly.</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var blogApp = angular.module('blogApp', ['ngResource']);
  
  blogApp.factory('Post', ['$resource', function($resource) {
      return $resource('/api/posts/:slug/', { slug:'@slug'});
  }]);
  
  blogApp.controller('postController', ['$scope', 'Post', function($scope, Post) {
      $scope.posts = []
  
      Post.query().$promise.then(function(posts) {
          $scope.posts = posts;
          for (key in posts){
              console.log(posts[key]);
          }
      });
  }]);
  </code></pre>
  
  <p><strong>index.html</strong> 
  ****EDIT**** I added the filter here to test, and it does do the filtering as intended, but still no text shows up in the <code>&lt;div&gt;</code>'s</p>
  
  <pre><code>&lt;div class="container"&gt;
     &lt;div class="col-sm-10"&gt;
  
        &lt;div ng-controller="postController"&gt;
           &lt;input type="text" ng-model="textTest"&gt;
  
           &lt;div class="well" ng-repeat="(key, post) in posts | filter: textTest"&gt;
              &lt;h1&gt;{{ post.title }}&lt;/h1&gt;
              {{ post.content }}
           &lt;/div&gt;
        &lt;/div&gt;
  
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is what is returned if I do a GET on /api/posts/</p>
  
  <pre><code>[
      {
          "url": "http://localhost:8000/api/posts/i-had-a-api-his-name-was-bingo/",
          "id": 0,
          "title": "I had a api... his name was Bingo",
          "content": "E-I-E-I-O",
          "owner": "Heather",
          "comments": "http://localhost:8000/api/posts/i-had-a-api-his-name-was-bingo/comments/"
      },
      {
          "url": "http://localhost:8000/api/posts/if-i-could-show-you-the-world/",
          "id": 1,
          "title": "If I Could Show You The World",
          "content": "It would be shining, and shimmering",
          "owner": "Heather",
          "comments": "http://localhost:8000/api/posts/if-i-could-show-you-the-world/comments/"
      },
      ...
  ]
  </code></pre>
  
  <p>In the template, all that shows up is a blank grey box (because of the bootstrap class) with no title or content from the posts, but the proper number of boxes do show up for the number of post objects. What am I missing?</p>
  
  <p><strong>EDIT:</strong> the console shows no errors, and the GET request is returning 200 application/json. I have a console.log($scope.posts) which is printing out <code>[Resource, Resource, Resource, Resource, Resource, Resource, Resource, $promise: Object, $resolved: true]</code>. Also,</p>
  
  <pre><code>for (key in $scope.posts){
     console.log(posts[key]);
  }
  </code></pre>
  
  <p>prints out </p>
  
  <pre><code>Resource {url: "http://localhost:8000/api/posts/i-had-a-api-his-name-was-bingo/", id: 0, title: "I had a api... his name was Bingo", content: "E-I-E-I-O", owner: "Heather"…}
  </code></pre>