Testing Directive's Click function using mockedServices

I am attempting to test my angular directive using Jasmine.

Here is shortened version my directive:

.directive('stateChanger', ['SweetAlert', '_', 'timelineService', 'prospectStates', function(SweetAlert, _, timelineService, prospectStates){

  function link(scope, ele, attrs){

    var states, inactive, selectedState;

    states = prospectStates;

    ele.on('click', function(){

      console.log('click function Called');
      // Remove the active state
      inactive = _.filter(states, function(s){
        return s.state !== scope.prospect.state;
      });

      // Initialize an empty HTML string that will hold the options
      var htmlString = '';

      // Iterate over each of the options and build the HTML for display
      angular.forEach(inactive, function(sObject){
         htmlString = htmlString + '<div class="radio radio-inline">' +
             '<input type="radio" name="selectedState" id="' + sObject.state + '"value="' + sObject.state + '"/>' +
             '<label for="' + sObject.state + '"> ' + sObject.label + ' </label>' +
             '</div>';
      });

      // Launch the SweetAlert
      SweetAlert.swal( ... );

    }); // END OF on('click');

  }

  return {
    restrict : 'E',
    templateUrl : 'app/prospects/stateChanger/stateChanger.html',
    scope : {
      prospect : "=",
      auth : '='
    },
    link : link
  };

}]); // END OF directive()

I am attempting to test whether the SweetAlert and Underscore functions are called when the element is clicked on. In my tests I've mocked up the two services as well as any other services that I use.

describe('stateChange.directive', function(){

  var $compile, $scope, mockTimelineService, mockSweetAlert, mockUnderscore, mockProspectStates;

  // Get the prospects modole available
  beforeEach(module('prospects'));

  // Create providers for all things that are injected in to the directive
  beforeEach(module(function($provide){

// Create a mock of the timelineService
$provide.service('timelineService', function() {
  this.getTimeline = jasmine.createSpy('getTimeline').and.callFake(function(params){
    return {
      then : function(callback){
        return {};
      }
    };
  });
});

// Create a mock of the $stateParams object
$provide.service('SweetAlert', function(){
  this.swal = jasmine.createSpy('swal').and.callFake(function(params){
    return {
      then : function(callback){
        return {};
      }
    };
  });
});

// Create a mock of the $stateParams object
$provide.service('_', function(){
  this.filter = jasmine.createSpy('filter').and.callFake(function(param){
    return [
      {state : 'contactMade', label : 'Contact Made'},
      {state : 'inDiscussion', label : 'In Discussion'}
    ];
  });
});

// Create a mock of the prospectStates constant
$provide.constant('prospectStates', [
  {state : 'raw', label : 'Raw'},
  {state : 'contactMade', label : 'Contact Made'},
  {state : 'inDiscussion', label : 'In Discussion'}]
);

  }));

  // Get the compile and scope objects available
  beforeEach(inject(function(_$compile_, _$rootScope_, timelineService, SweetAlert, _, prospectStates){
$compile = _$compile_;
$scope = _$rootScope_.$new();
mockTimelineService = timelineService;
mockSweetAlert = SweetAlert;
mockUnderscore = _;
mockProspectStates = prospectStates;

$scope.currentAuth = {uid : '234lkhj234lkj'};
  }));

  // Test to make sure that the elements rendered correctly
  it('should call the underscore filter function', function(){
var element = $compile('<state-changer prospect="prospect" auth="currentAuth"></state-changer>')($scope);
$scope.$digest();

$scope.prospect = {state : 'raw'};
element.triggerHandler('click');
$scope.$digest();

expect(mockUnderscore.filter).toHaveBeenCalled();
expect(mockSweetAlert.swal).toHaveBeenCalled();

  });

});

When the tests run, they fail at the last two assertions. I can't figure out why the functions are not called when the element is clicked on within these tests.

Any help would be appreciated.

Thanks.