How can I access an instance of an element in my directive's link function?

I have become a bit stuck while testing an angularJS directive. It is a fairly simple directive, I'm creating a template, creating an isolated scope (bound both ways via '=') and a link function that links a watcher to the DOM for the 'val' parameter. Depending on the other vals in the isolated scope, the watcher will apply different classes to my element.

I am trying to test the link function of my directive. My current setup is with Karma and Jasmine. I want to pass in some various scope parameters, trigger a digest, then see that the element changed appropriately, but whenever I try to log 'element' after I compile and digest, it is just the template element object...the classes don't seem to be added to the element html.

Here is the code from my directive. If my testing strategy is not the best way to go about testing the link function of a directive, I am definitely open to suggestions!

angular.module('dashboard').directive('gradientBar', function() {
    return {
        restrict: 'E',
        template: '<div class="bar"><div class="bar-fill"></div><div class="bar-ref"></div></div>',
        replace: true,
        scope: {
            'min': '=',
            'max': '=',
            'val': '=', // val represents current iteration value for the field
            'avg': '=',
            'prev': '=', // prev is previous iteration value for the field
        },

    link: function(scope, element, attrs) {
        scope.$watch('val', function(newval, oldval, scope) {

            var ref_current = Math.round((scope.val - scope.min) * 100 / (scope.max - scope.min));

            if (scope.prev) {

                var ref_prev = Math.round((scope.prev - scope.min) * 100 / (scope.max - scope.min));
                element.find('.bar-ref').css('left', ref_prev + "%");
console.log(element) //this just logs the template html! not the element with updated CSS.
            } else if (scope.avg) {

                var ref_avg = Math.round((scope.avg - scope.min) * 100 / (scope.max - scope.min));
                element.find('.bar-ref').css('left', ref_avg + "%");

            } else {

                element.find('.bar-ref').css('display', 'none');
                console.log(element.find('.bar-ref').css('display'));
                var val = true;
                console.log(val)
            }
            var width = (scope.val - scope.min) / (scope.max - scope.min);
            element.find('.bar-fill').css('width', ref_current + "%").css('background', colorify(width));
        });
    }
};