unit testing directive, tests not returning value

Hello I am looking to test a directive but I am having a hell of a time doing it. this is my test so far:

describe('pbImagePicker', function () {

    beforeEach(module('pb.campaigns.directives'));
    beforeEach(module('ui.router'));
    beforeEach(module('ui.bootstrap'));

    var $compile;
    var element;
    var $rootScope;

    beforeEach(inject(function (_$compile_, _$rootScope_, _$document_) {
        $compile = _$compile_;
        $rootScope = _$rootScope_;
        $document = _$document_;
        scope = $rootScope.$new();
    }));

    describe('template', function () {




        it('should render HTML based on scope correctly', function () {
            scope.campaign = {
                fileId: '43253',
                accountId: '3874',
                imageSource: 'http://ift.tt/15PRIlY',
                width: '250',
                height: '250'
            };

            var element = $compile('<img data-ng-src="{{ imageSource }}" width="{{width}}" height="{{height}}" alt="Image Picker" class="img-rounded" />')(scope);
            scope.$digest();

            expect(element.html()).toEqual('<img data-ng-src="http://ift.tt/15PRIlY" width="250" height="250" alt="Image Picker" class="img-rounded" />');
            //expect(element.attr('src')).toBe('http://ift.tt/15PRIlY');
        });

    });


    describe('element.click()', function () {

        var campaign = {
            fileId: '43253',
            accountId: '3874',
            imageSource: 'http://ift.tt/15PRIlY',
            width: '250',
            height: '250'
        };
        var image = {
            storageUrl: 'http://ift.tt/15PRIm0',
            fileId: 6432342
        };
        var accountId = 543222;
        var pickImage = function (accountId) {
            var defer = $q.defer();
            defer.resolve(image);
            return defer.promise;
        };

        //beforeEach(function () {
        //    element = angular.element('<img data-ng-src="{{ imageSource }}" width="{{width}}" height="{{height}}" alt="Image Picker" class="img-rounded" />');
        //    compiled = $compile(element)(scope);
        //    compiled.triggerHandler('click');
        //});

        it('should resolve a promise when clicked', function () {
            scope.campaign = campaign;
            scope.accountId = accountId;
            scope.pickImage = pickImage;

            element = angular.element('<img data-ng-src="{{ imageSource }}" width="{{width}}" height="{{height}}" alt="Image Picker" class="img-rounded" />');
            compiled = $compile(element)(scope);
            compiled.triggerHandler('click');

            spyOn(scope, 'pickImage');
            scope.$digest();
            expect(scope.pickImage).toHaveBeenCalledWith(scope.accountId);
        });

        it('should assign data from resolved promise when clicked', function () {
            scope.campaign = campaign;
            scope.accountId = accountId;
            scope.pickImage = pickImage;

            element = angular.element('<img data-ng-src="{{ imageSource }}" width="{{width}}" height="{{height}}" alt="Image Picker" class="img-rounded" />');
            compiled = $compile(element)(scope);
            compiled.triggerHandler('click');

            scope.$digest();
            expect(scope.imageSource).toEqual('http://ift.tt/15PRIm0');
            expect(scope.fileId).toEqual(6432342);
        });


    });

});

this is the directive I am testing:

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());
                    });
                });
            }
        };
    }]);

The errors that I am getting are:

Test 'pbImagePicker template:should render HTML based on scope correctly' failed
    Expected '' to equal '<img data-ng-src="http://ift.tt/15PRIlY" width="250" height="250" alt="Image Picker" class="img-rounded" />'.

Test 'pbImagePicker element.click():should resolve a promise when clicked' failed
    Expected spy pickImage to have been called with [ 543222 ] but it was never called.

Test 'pbImagePicker element.click():should assign data from resolved promise when clicked' failed
    Expected undefined to equal 'http://ift.tt/15PRIm0'.

I am really stuck for how to proceed or if im on the right track. The angular docs for testing directives are a little lacking. http://ift.tt/15KfWwW was a big help getting started if anyone else is having problems getting started.

Thanks for any tips!