An AngularJS slider directive

slider.ts

    slider.$inject = [];
    function slider() {

        return <ng.IDirective>{
            restrict: 'E',
            replace: true,
            scope: {
                model: '=ngModel',
                isRequired: '=',
                min: '=',
                max: '=',
                step: '='
            },
            transclude: true,
            template:
            '<input type="text" data-ng-required="isRequired" model="model" class="span2" value="{{model}}" data-slider-value="-14" data-slider-orientation="horizontal" data-slider-selection="before" data-slider-tooltip="hide" />',
            link: link
        }

        function link($scope, $element, $attrs) {
            var $counter = angular.element('<span class="badge" style="margin-left: 5px;">0</span>');
            $element.after($counter);
            $element.slider({
                max: $scope.max,
                min: $scope.min,
                step: $scope.step
            }).on('slideStop', function ($event) {
                $scope.model = $event.value;
                $counter.html($scope.model);

            });

            $scope.swipe = function() {
                console.log('swiping');
            }

        }
    }
    angular.module('app').directive('slider', slider);