Angular binding does not work in data attribute

Question

I am using some CSS css template that comes with many html components and with lots of data attributes for different things. For example, for a slider, it has something like

<div class="slider slider-default"> <input type="text" data-slider class="slider-span" value="" data-slider-orientation="vertical" data-slider-min="0" data-slider-max="200" data-slider-value="{{ slider }}" data-slider-selection="after" data-slider-tooltip="hide"> </div> 

Here I am trying to relate the meaning

 data-slider-value="{{ slider }}" 

But it does not work. The slider variable is set in $ scope as:

  $scope.slider = 80; 

The same value of 80 is displayed on the right when I bind it as:

  <h4>I have {{ slider }} cats</h4> 

I also tried

  ng-attr-data-slider-value="{{ slider }}" 

This did not work.

Update

The directive has something like this

 function slider() { return { restrict: 'A', link: function (scope, element) { element.slider(); } } }; 

where element.slider(); calls the code in bootstrap-slider.js (from here ) for each of the sliders.

Answer 1

I played with this for a while and came up with several options for you. See My Plunkr to see them in action.

Option 1: no need to update the scope value when changing the slider

This will work with HTML from your question. You must change the directive code below.

 app.directive('slider', function slider() { return { restrict: 'A', link: function(scope, element, attrs) { attrs.$observe('sliderValue', function(newVal, oldVal) { element.slider('setValue', newVal); }); } } }); 

Option 2. Bilateral binding to scope property

If you need to change the scope property when dragging the slider handle, you must change the directive to the following:

 app.directive('sliderBind', ['$parse', function slider($parse) { return { restrict: 'A', link: function(scope, element, attrs) { var val = $parse(attrs.sliderBind); scope.$watch(val, function(newVal, oldVal) { element.slider('setValue', newVal); }); // when the slider is changed, update the scope // property. // Note that this will only update it when you stop dragging. // If you need it to happen whilst the user is dragging the // handle, change it to "slide" instead of "slideStop" // (this is not as efficient so I left it up to you) element.on('slideStop', function(event) { // if expression is assignable if (val.assign) { val.assign(scope, event.value); scope.$digest(); } }); } } } ]); 

The markup for this changes slightly:

 <div class="slider slider-default"> <input type="text" data-slider-bind="slider2" class="slider-span" value="" data-slider-orientation="vertical" data-slider-min="0" data-slider-max="200" data-slider-selection="after" data-slider-tooltip="hide" /> </div> 

Note the use of the data-slider-bind attribute to specify the scope property for binding and the absence of the data-slider-value attribute.

I hope one of these two options is what you were after.