Issue with updating the jQuery UI Slider from Angular directive

I'm trying to get a custom slider up and running using the directives concept.
I have an issue when updating the slider from the input field.

The directive part below and a working example on jsfiddle.

Why is this line $privateScope.sliderElement.slider('value', value); throwing an error and how could I solve it?

app.directive('slider', function ($parse) {
    var $privateScope = {};

    return {
        restrict: 'A',
        template: '<div class="slider"></div><div class="input-append"><input class="span1" type="text" ng-model="percentage"><span class="add-on">%</span></div>',
        scope: {
            slider: '@',
            percentage: '='
        },
        controller: ['$scope', '$element', '$attrs', '$transclude', function ($scope, $element, $attrs, $transclude) {
            // Why this doesn't work?
            // $attrs.$observe('percentage', function (value) {
            //   console.log('$attrs.$observe.percentage', value);
            // });

            // Slider API: http://api.jqueryui.com/slider/
            $privateScope.sliderElement = $('.slider', $element).slider({
                value: $scope.percentage
            });
        }],
        link: function ($scope, $element, $attrs) {
            var changedBySlider = false;

            $scope.$watch('percentage', function (value) {
                // console.log('$scope.$watch.percentage', value);

                if (changedBySlider !== true) {
                    console.log('change the slider');

                    // This throws an error
                    // $privateScope.sliderElement.slider('value', value);
                } else {
                    console.log('don\'t change the slider');
                    changedBySlider = false;
                }
            });

            $privateScope.sliderElement.on('slidechange', function (event, ui) {
                $scope.$apply(function () {
                    // Why this doesn't work?
                    // $parse($attrs.percentage).assign($scope, ui.value);

                    $scope.percentage = ui.value;
                    changedBySlider = true;
                });
            });

            $scope.$on('$destroy', function (event) {
                console.log('on destroy');
            });
        }
    }
});