Very challenging directive - looking for guidance on how to unit test - angularjs

Question

I just realized that none of the tests I have written for my directive are working in a way that actually tests anything so I am rewriting them. Problem is I cant figure out a way to test the link functions.
If anyone has a suggestion I would really really appreciate it.
Thanks for looking
angular.module('pb.webSites.directives')
.directive('pbOrganizationImagePicker', [ function () {
return {
restrict: "E",
template: '<img data-ng-src="{{ imageSource }}" width="{{width}}" height="{{height}}" alt="Image Picker" class="img-rounded" />',
scope: {
fileId: '=pbFileId',
defaultSrc: '#pbDefaultSrc',
width: '#pbWidth',
height: '#pbHeight'
},
controller: 'pbOrganizationImagePickerController',
link: function (scope, element, attrs) {
scope.$watch('defaultSrc', function (value) {
if (value !== undefined) {
scope.imageSource = value;
}
});
element.on('click', function () {
scope.pickImage().then(function (image) {
scope.imageSource = image.storageUrl;
scope.fileId = image.fileId;
}, function () {
console.log('Modal dismissed at: ' + new Date());
});
});
}
};
}]);
Someone asked what I was doing so far to test this directive. Right now the link sections tests are a mess but I thought I would post it here in case anyone else was curious.
describe('pbOrganizationImagePicker', function () {
beforeEach(module('pb.webSites.controllers'));
beforeEach(module('pb.webSites.directives'));
beforeEach(module('ui.router'));
beforeEach(module('ui.bootstrap'));
var compile;
var scope;
var html = angular.element('<pb-organization-image-picker data-pb-default-src="{{ webSite.profileImageUrl || \'/content/img/placeholder-lg.jpg\' }}" data-pb-file-id="webSite.profileImageId" data-pb-width="200"></pb-organization-image-picker>');
beforeEach(inject(function ($compile, $rootScope) {
compile = $compile
scope = $rootScope.$new();
}));
beforeEach(inject(function ($q, $injector) {
$httpBackend = $injector.get('$httpBackend');
$httpBackend.whenGET('/app/webSites/directives/OrganizationImagePicker.html').respond(200, '');
scopeObject = {
profileImageUrl: 'http://www.gravatar.com/avatar/12345?s=40&d=identicon',
profileImageId: 54634
};
scope.webSite = {
profileImageId: 6436
};
scope.pickImage = function () {
var defer = $q.defer();
defer.resolve(scopeObject);
return defer.promise;
};
}));
describe('template with profileImageUrl', function () {
beforeEach(function () {
scope.webSite.profileImageUrl = 'http://www.gravatar.com/avatar/12345?s=40&d=identicon';
element = compile(html)(scope);
});
it('should render HTML based on scope correctly', function () {
expect(element.isolateScope().width).toEqual('200');
expect(element.isolateScope().fileId).toEqual(scope.webSite.profileImageId);
expect(element.isolateScope().defaultSrc).toEqual(scope.webSite.profileImageUrl);
});
});
describe('template without profileImageUrl', function () {
beforeEach(function () {
element = compile(html)(scope);
});
it('use default URL if there is no profileImageUrl', function () {
expect(element.isolateScope().defaultSrc).toEqual('/content/img/placeholder-lg.jpg');
});
});
describe('element.click()', function () {
beforeEach(function () {
var html = angular.element('<img data-ng-src="{{ imageSource }}" width="{{width}}" height="{{height}}" alt="Image Picker" class="img-rounded" />');
});
it('should assign value to scope variables', function () {
template = compile(html)(scope);
template.triggerHandler('click');
template.scope().$apply();
scope.pickImage();
scope.$digest();
expect(scope.imageSource).toEqual(scopeObject.profileImageUrl);
expect(template.isolateScope().fileId).toEqual(scopeObject.profileImageId);
});
});
describe('$watch', function () {
beforeEach(function () {
element.isolateScope().defaultSrc = 'foobar';
element = compile(html)(scope);
});
it('should have expected watchers added to the child scope', function () {
expect(element.isolateScope().$$watchers[0].exp).toBe('defaultSrc');
});
it('$watch should watch for changes on defaultSrc', function () {
element.isolateScope().defaultSrc = "barfoo";
element.isolateScope().$apply();
expect(scope.imageSource).toEqual('barfoo');
});
});
});