AngularJS - Passing a function to spyOn

SO I have this simple, watered-down app that returns the NATO alphabet and then does unit tests on it using mocks and promises.

HERE'S A LIVE DEMO: http://ift.tt/1R7HVvX

I'm trying to spyOn a function from my .service() of MainModel. In the controller, I have a deferred promise called natoAlphabet that successfully displays on the page.

At first, I was referencing getNato from the MainController, but I never set MainController.getNato to the MainModel.getNato.

So I added in the MainController:

this.getNato = MainModel.getNato;

And I get the error of: Expected spy getNato to have been called.

However, in the console log, if you do a console output of mockMainCtrl the controller being mocked inside the beforeEach near the top, you get Object {name: "Hello World!", getNato: Promise}

and then below inside the first it() test, the output is Object {name: "Hello World!"} however, if you expand that one, you get:

Object {name: "Hello World!"}
    getNato: Promise
    name: "Hello world!";
    __proto__: Object

Whereas the one inside the beforeEach, you had getNato.

My error

My error happens when the Jasmine test runs and I get Expected spy getNato to have been called. from the line expect(mockMainCtrl.getNato).toHaveBeenCalled(); on theSpec.js.

So what am I doing wrong?

The two files

theSpec.js:

describe('Controller: MainCtrl', function() {

  beforeEach(module('app'));

  var $scope, $q, mockMainCtrl, $controller, scope, deferred;

  beforeEach(inject(function($controller, _$rootScope_, _$q_, MainModel) {
    $q = _$q_;
    $scope = _$rootScope_.$new();

    deferred = _$q_.defer();

    mockMainCtrl = $controller('MainCtrl', {
      $scope: $scope,
      MainModel: MainModel
    });

    console.log(mockMainCtrl);
  }));

  it('spied and have been called', function() {
    spyOn(mockMainCtrl, 'getNato');
    console.log(mockMainCtrl);
    expect(mockMainCtrl.getNato).toHaveBeenCalled();
  });

  it('Name from service, instantiated from controller, to be mocked correctly', inject(function() {
    expect(mockMainCtrl.name)
      .toEqual("Hello World!");
  }));

  it('Get [getNato] mocked deferred promise', function(mainCtrl) {
    deferred.resolve([{ id: 1 }, { id: 2 }]);
    $scope.$apply();
    expect($scope.results).not.toBe(undefined);
    expect($scope.results).toEqual(['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo', 'Foxtrot', 'Golf', 'Hotel', 'India']);
    expect($scope.error).toBe(undefined);
  });
});

app.js:

var app = angular.module('app', []);

app.service('MainModel', function($q) {
  this.name = "Hello World!";

  var getNato = function() {
    var deferred = $q.defer();
    var theNatoAlphabet = ['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo', 'Foxtrot', 'Golf', 'Hotel', 'India'];
    deferred.resolve(theNatoAlphabet);
    return deferred.promise;
  };

  this.getNato = getNato();
});

app.controller('MainCtrl', function($scope, MainModel) {
  this.name = MainModel.name;

  var self = this;

  MainModel.getNato.then(function(data) {
    self.natoAlphabet = data;
    $scope.results = data;
  }).catch(function() {
    $scope.error = 'There has been an error!';
  });

  this.getNato = MainModel.getNato;


});

I don't think there is anything wrong with app.js because the page can successfully read the promise.