Issue with updating the jQuery UI Slider from Angular directive - jquery-ui

Question

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');
});
}
}
});