How do I convert to a proper directive from a jquery script?

Question

I don't know what is the equivalent to $() from link: function (scope, element, attrs, controller) { }. If I just drop the jquery script into the function, it works. But everywhere read on the internet says that not best practice. I tried to replace $() with element, element[0], angular.element(element), and angular.element(element[0]). None of those worked.

<div>
<!-- html code here -->
<div id="section-indexes" class="padding20 bg-grayLighter align-left">
    <span class="pivot" style="font-size:large;margin-right:30px;cursor:pointer;" data-index="1">Daily Sales</span>
    <span class="pivot" style="font-size:large;margin-right:30px;cursor:pointer;" data-index="2">Monthly Sales</span>
    <span class="pivot" style="font-size:large;margin-right:30px;cursor:pointer;" data-index="3">Item 3</span>
    <span class="pivot" style="font-size:large;margin-right:10px;cursor:pointer;" data-index="4">Item 4</span>
</div>
<div id="section" class="carousel" data-role="carousel" data-height="false" data-controls="false" data-markers="false" data-auto="false">
    <div class="slide">
        Item 1
    </div>
    <div class="slide">
        Item 2
    </div>
    <div class="slide">Hello I am Item 3</div>
    <div class="slide">Hello I am Item 4</div>
</div>

The above is the directive html (/App/directives/pivot.directive.html).

The directive js (/App/directives/pivot.directive.js) is below.

(function () {
    'use strict';

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

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

        var directive = {

            restrict: 'E',
            scope: {

            },
            link: function (scope, element, attrs, controller) {
                // this doesn't work
                // how do i fix this?
                var elem = element[0];
                var car_m_2 = elem('#section').data('carousel');
                var thumbs = elem('#section-indexes > .pivot');
                elem.each(thumbs, function () {
                    var thumb = elem(this);
                    index = thumb.data('index') - 1;
                    thumb.on('click', function () {
                        car_m_2.slideTo(index);
                    });
                });
                //
                /* this works as is */
                //$(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: 'pivot',
            templateUrl: '/App/directives/pivot.directive.html'
        };

        return directive;
    }

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

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

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

    }

})();