Unit testing angular directive - very stuck - angularjs

Question

I am having a ton of trouble testing my directive.
Right now I am stuck with these two errors
Test 'pbImagePicker template:should render HTML based on scope correctly' failed
TypeError: 'undefined' is not a function (evaluating 'element.click')
Test 'pbImagePicker element.click():should assign data from resolved promise when clicked' failed
TypeError: 'undefined' is not a function (evaluating 'scope.$new(true)')
Directive:
angular.module('pb.campaigns.directives')
.directive('pbImagePicker', ['$window', '$document', function ($window, $document) {
return {
restrict: "E",
template: '<img data-ng-src="{{ imageSource }}" width="{{width}}" height="{{height}}" alt="Image Picker" class="img-rounded" />',
scope: {
fileId: '=pbFileId',
accountId: '=pbAccountId',
defaultSrc: '#pbDefaultSrc',
width: '#pbWidth',
height: '#pbHeight'
},
controller: 'pbImagePickerController',
link: function (scope, element, attrs) {
scope.$watch('defaultSrc', function (value) {
if (value !== undefined) {
scope.imageSource = value;
}
});
element.click(function () {
scope.pickImage(scope.accountId).then(function (image) {
scope.imageSource = image.storageUrl;
scope.fileId = image.fileId;
}, function () {
console.log('Modal dismissed at: ' + new Date());
});
});
}
};
}]);
I am also trying to test the element.click by using the triggerHandler but im not having any luck. Testing the link: $watch function has also proven to be impossible for me. Has anyone ever done this? I have found simular examples but none that I seem to be able to get working
this is what I currently have:
describe('pbImagePicker', function () {
beforeEach(module('pb.campaigns.controllers'));
beforeEach(module('pb.campaigns.directives'));
beforeEach(module('ui.router'));
beforeEach(module('ui.bootstrap'));
var compile;
var scope;
var mockModal = {};
// var element = {
// click: function () { }
//};
beforeEach(inject(function ($compile, $rootScope) {
compile = $compile;
scope = $rootScope.$new();
}));
describe('template', function () {
it('should render HTML based on scope correctly', function () {
//scope = {
scope.fileId = '43253';
scope.accountId = '3874';
scope.imageSource = 'http://www.gravatar.com/avatar/12345?s=40&d=identicon';
scope.width = '250';
scope.height = '250';
//};
var html = angular.element('<pb-image-picker data-pb-default-src="{{ campaign.sponsorSmallImageUrl || \'/content/img/placeholder-sm.jpg\' }}" data-pb-file-id="campaign.sponsorSmallImageId" data-pb-account-id="currentAccountId" data-pb-height="55"></pb-image-picker>');
compiled = compile(html)(scope);
compiled.triggerHandler('click');
scope.$digest();
expect(scope.width).toEqual('250');
expect(scope.accountId).toEqual('3874');
expect(element.hasClass('img-rounded')).toBe(true);
expect(element.attr('width')).toEqual('250');
expect(element.attr('height')).toEqual('250');
expect(element.attr('alt')).toMatch('Image Picker');
//or even expect it to match the scope value
expect(element.attr('width')).toEqual(scope.width);
});
});
describe('element.click()', function () {
var image;
beforeEach(inject(function ($q) {
image = {
storageUrl: 'http://www.pressboard.com/avatar/7453',
fileId: 6432342
};
scope.pickImage = function (accountId) {
var defer = $q.defer();
defer.resolve(image);
return defer.promise;
};
scope = {
fileId: '43253',
accountId: '3874',
imageSource: 'http://www.gravatar.com/avatar/12345?s=40&d=identicon',
width: '250',
height: '250'
};
}));
it('should assign data from resolved promise when clicked', function() {
var element = compile('<pb-image-picker data-pb-default-src="{{ campaign.sponsorSmallImageUrl || \'/content/img/placeholder-sm.jpg\' }}" data-pb-file-id="campaign.sponsorSmallImageId" data-pb-account-id="currentAccountId" data-pb-height="55"></pb-image-picker>')(scope);
element.triggerHandler('click');
scope.$digest();
expect(scope.imageSource).toEqual(image.storageUrl);
expect(scope.fileId).toEqual(image.fileId);
});
});
});
the pickImage function is defined in my controller as
$scope.pickImage = function (accountId) {
var modalOptions = {
templateUrl: '/app/campaigns/directives/ImagePicker.html',
controller: 'pbImagePickerModalController',
resolve: {
accountId: function () {
return accountId;
}
}
};
var modalInstance = $modal.open(modalOptions);
return modalInstance.result;
};