Angular is showing an empty array when consuming a JSON api

I'm having trouble using a Rails JSON API in my angular app. I created a service in Angular that does this is querying my rails database for the index with code like this:

var app = angular.module('myApp');

app.factory('Comment', function($resource) {
    return $resource('http://localhost:3000/comments.json', {},{
      index: { method: 'GET', isArray: true, responseType: 'json' },
      show: { method: 'GET', responseType: 'json' },
      update: { method: 'PUT', responseType: 'json' }
    });
  });


app.controller('MainCtrl', function ($scope, Comment) {
    $scope.json = Comment.index();
  });

My Rails controller code looks like this:

  def index
    @comments = Comment.all

    render json: @comments
  end

My routes file is just:

resources :comments

And I know that my Angular App is pinging my rails API for the information because when I start the server my rails console says:

Started GET "/comments.json" for 127.0.0.1 at 2014-05-29 20:36:16 -0700
Processing by CommentsController#index as JSON
Comment Load (0.2ms)  SELECT "comments".* FROM "comments"
Completed 200 OK in 2ms (Views: 2.1ms | ActiveRecord: 0.2ms)

But it just returns an empty array when I bind $scope.json in my HTML file.