Test Results of scope.$on Handlers AngularJS Directives

I have a directive with some scope.$on handlers set up. When those handlers run, some css on the element is updated.

I'm not seeing the css changes take place, even though I'm certain the events are firing and the handlers are responding.

the directive:

(function () {
    'use strict';
    angular.module('eve.upload.progress')
        .directive('uploadProgressButton', ['uploadProgressConstants', 'UploadProgressSvc', '$compile',
            function (uploadProgressConstants, UploadProgressSvc, $compile) {
                var styles = {
                    idle: {
                        cloud: 'base-icon cloud',
                        status: ''
                    },
                    success: {
                        cloud: 'base-icon cloud success',
                        status: 'glyphicon glyphicon-ok top-icon-overlay'
                    },
                    error: {
                        cloud: 'base-icon cloud error',
                        status: 'base-icon exclamation top-icon-overlay'
                    },
                    working: {
                        cloud: 'base-icon cloud',
                        status: 'glyphicon glyphicon-stats top-icon-overlay'
                    }
                };

                var dynamicButton = '<div id="upload-progress-status-button">' +
                    '<a ng-click="onClick();">' +
                    '<i id="upload-progress-button-cloud" class="base-icon cloud"></i>' +
                    '<i id="upload-progress-button-status"></i>' +
                    '</a>' +  //nbsp so the icon becomes clickable
                    '</div>';

                return {
                    scope: {
                        currentUploads: '=',
                        clickAction: '&'
                    },
                    template: '<div id="upload-status-button-container">' +
                    dynamicButton +
                    '</div>',
                    restrict: 'AE',
                    link: function (scope /*,element, attrs*/) {
                        /**
                         * listen for any errors coming out of the upload process
                         * if there was an error we want to change to the right button template
                         * with the exclamation and red cloud
                         */
                        scope.$on(uploadProgressConstants.UPLOAD_ERROR_EVENT, function (/*event, args*/) {
                            changeCurrentButton('error');
                        });

                        /**
                         * listen for the uploads complete event to change the template to the
                         * greeen arrow
                         */
                        scope.$on(uploadProgressConstants.UPLOADS_COMPLETE_EVENT, function (/*event, args*/) {
                            changeCurrentButton('success');
                        });

                        /**
                         * when uploads start or are running this allows the directive to update
                         * the button template to the working cloud and animation
                         */
                        scope.$on(uploadProgressConstants.UPLOADS_INITIATED_EVENT, function (/*event, args*/) {
                            changeCurrentButton('working');
                        });

                        /**
                         * when uploads go back to idle
                         * this would generally occur when an upload is canceled or aborted
                         * because we should not consider it a uploads complete event
                         */
                        scope.$on(uploadProgressConstants.UPLOADS_IDLE_EVENT, function (/*event, args*/) {
                            changeCurrentButton('idle');
                        });

                        var changeCurrentButton = function (status) {
                            var iCloud = angular.element('#upload-progress-button-cloud');
                            var iStatus = angular.element('#upload-progress-button-status');
                            iCloud.removeClass();
                            iStatus.removeClass();
                            iCloud.addClass(styles[status || 'idle'].cloud || 'base-icon cloud');
                            iStatus.addClass(styles[status || ''].status) || '';
                        }

                        /**
                         * when the button is clicked, the scope.clickAction method needs to be called
                         * and the directive needs to update button state depending on what the current state
                         * of uploads is
                         */
                        scope.onClick = function () {
                            scope.clickAction();
                            //check the current state of the uploads
                            var status = UploadProgressSvc.calculateOverallUploadStatus(scope.currentUploads);

                            if (status.uploading === 0) {
                                changeCurrentButton('idle');
                            } else if (status.uploading > 0) {
                                changeCurrentButton('working');
                            }
                        }
                    }
                };
            }]);
})();

The tests:

describe('button state tests', function () {
        it('the button should change to the success state when the uploads complete event is handled', function() {
            UploadProgressSvc.broadcastAllUploadsComplete($scope, statusMock);
            var element = getCloudAnchor();
            expect(element.hasClass('success')).toBe(true);
        });
    });

    var getCloudAnchor = function() {
        return view.find('#upload-progress-button-cloud');
    };

    var getStatusAnchor = function() {
        return view.find('#upload-progress-button-status');
    }

How does one get this type of element css update to work in a Karma/Jasmine test?