Not showing data in HTML from Angular app - angularjs

Question

I'm consuming a Django REST API with an Angular JS app. I want to print a list of classrooms in a HTML table. This is the Json data I get from the REST API: http://pastebin.com/raw/s0knYX89
Here's the HTML
<div ng-app="userListApp">
<div ng-controller="UsersController">
<table class="table table-striped">
<thead>
<tr>
<th>Classroom</th>
<th>School</th>
<th>Academic year</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="classroom in classrooms">
<td>{{classroom.classroom}}</td>
<td>{{classroom.school.school_name}}</td>
<td>{{classroom.academic_year}}</td>
</tr>
</tbody>
</table>
</div>
</div>
And here's the app.js
var userListApp = angular.module('userListApp', ['ngResource']);
userListApp.factory('Classroom', function($resource) {
return $resource('/classrooms/?format=json', {}, {
query: {
method: 'GET',
isArray:true,
}
});
});
userListApp.controller('UsersController', function($scope, $resource, Classroom) {
Classroom.query({},function(data) {
$scope.classrooms = data;
console.log(data);
});
});
Anyway, all I get is this
I put console.log(data); to check if the data arrives to the page, and that's what I get: all of the data in the console, and none in the HTML page - even though the rows of the table are three, exactly the number I should get, but they are all blank.
Any thoughts?

Answer 1

As you can see in the console.log, the data returned is a promise. Try to access the api response correctly.

Answer 2

Try adding ng-show on the table:
<table ng-show = "classrooms != null" class="table table-striped">
<thead>
<tr>
<th>Classroom</th>
<th>School</th>
<th>Academic year</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="classroom in classrooms">
<td>{{classroom.classroom}}</td>
<td>{{classroom.school.school_name}}</td>
<td>{{classroom.academic_year}}</td>
</tr>
</tbody>
</table>
Where did you call a functnio to start $http request?