Fetching a RESTful resource in AngularJS (CoffeeScript)

foo.html.haml

%div{'ng-controller' => 'FooCtrl as foo'}
  this is the content
  %button{'ng-click' => 'foo.bar()'} Call bar()
  %div{'ng-repeat' => 'report in foo.reports'}
    this is one report: {{ report.reference }} {{ report.bar }}

foo.js.coffee

class FooCtrl
  constructor: (Report) ->
    console.log "constructor called"
    @reports = Report.query {}, ->
      console.log "data fetched"
      console.log "reports is", @reports
    # @reports = [
    #   foo: 1
    #   bar: '123'
    # ]

  bar: ->
    console.log "bar called"
    @reports = [
      foo: "baddaslkjasdjkladsjklads"
      bar: 'fggdfdgf'
    ]

reportFactory = ($resource) ->
  $resource '/contact_centre/index.json'

angular
  .module('mmm.foo', [])
  .factory('Report', ['$resource', reportFactory])
  .controller('FooCtrl', ['Report', FooCtrl])