Carousel Directive JS

(function () {
    'use strict';

    angular
        .module(usbeefConstants.generateName(usbeefConstants.appModule, usbeefConstants.NAMETYPES.module))
        .directive(usbeefConstants.generateName('pivot', usbeefConstants.NAMETYPES.directive), pivot);

    pivot.$inject = ['pivotservice', 'logger'];
    function pivot(pivotservice, logger) {
        // Usage:
        //     <usbeefcorp-metrodb-pivot></usbeefcorp-metrodb-pivot>
        // Creates:
        //     usbeefcorpMetrodbTemplate in javascript
        //

        var directive = {

            restrict: 'E',
            scope: {
                attribute1: '@',
                attribute2: '='
            },
            link: function (scope, element, attrs, controller) {
                // pasted previous code here because don't know what to do from here
                $(function () {
                    var car_m_2 = $('#section').data('carousel');
                    var thumbs = $('#section-indexes > .pivot');
                    $.each(thumbs, function () {
                        var thumb = $(this), index = thumb.data('index') - 1;
                        thumb.on('click', function () {
                            car_m_2.slideTo(index);
                        });
                    });
                });
            },
            controller: pivotController,
            controllerAs: 'temp',
            //TEMPLATEURL should not be changed
            templateUrl: '/App/directives/pivot.directive.html'
        };

        return directive;
    }

    pivotController.$inject = ['$scope', 'pivotservice', 'logger'];
    function pivotController($scope, pivotservice, logger) {

        var pivot = this;
        pivot.pivot = [];
        activate();

        function activate() {
            logger.log('pivot.directive.js - activate() completed');
        }

    }

})();