Angular JS jQuery UI Slider

angular-jqueryui.html

<jq-schlider ng-enabled="state.master" at="time.at" max="time.max_timestep"></jq-schlider>

<script>
angular
    .module('Components', [])
    .directive('jqSchlider', function () {
        return {
            restrict: 'E',
            replace: true,
            template: '<div id="schlider"></div>',
            scope: {
                'ngEnabled': '=',
                'max':       '=',
                'at':        '='
            },
            link: function (scope, element, attrs) {
                element.slider({
                    stop : function(event, ui) {}
                });

                element.on('slidestop', function(event, ui){
                    scope.$apply(function(){
                        scope.$parent.time.at = ui.value;
                    });
                });

                scope.$watch('max', function (value) {
                    element.slider('option', 'max', value);
                });

                scope.$watch('at', function (value) {
                    element.slider('option', 'value', value);
                });
                
                scope.$watch('ngEnabled', function (value) {
                    element.attr('enabled', value);

                    if (value) {
                        element.slider('enable');
                    }
                    else {
                        element.slider('disable');
                    }
                });
            }
        };
    });

</script>