Почему не происходит перерисовка темплейта?

Question

[Васса]

Почему не происходит перисовка темплейта, изменения значений происходит в директиве.

Код директивы:

.directive('ngPriceFilter', function($compile) {
    return {
        link: function (scope, element, attr) {
            scope.$sliderElemnt = $(element).find('.price-slider');
            scope.PRICE_RANGE = JSON.parse(attr.ngPriceFilter).PRICE_RANGE;
            scope.priceFrom = scope.PRICE_RANGE[0];
            scope.priceTo = scope.PRICE_RANGE[1];

            scope.$sliderElemnt.noUiSlider({
                start: scope.PRICE_RANGE,
                range: {
                    'min': scope.PRICE_RANGE[0],
                    'max': scope.PRICE_RANGE[1]
                }
            });

            scope.$sliderElemnt.on('slide', function(){
                var values = scope.$sliderElemnt.val();

                scope.priceFrom = values[0];
                scope.priceTo   = values[1];
            });

            scope.$sliderElemnt.find('.noUi-handle:first').append('<div class="handle-content">{{ priceFrom }}</div>');
            scope.$sliderElemnt.find('.noUi-handle:last').append('<div class="handle-content">{{ priceTo }}</div>');

            $compile(scope.$sliderElemnt)(scope);
        }
    }
});

Новые значения присваиваются в коде

scope.$sliderElemnt.on('slide', function(){
     var values = scope.$sliderElemnt.val();

     scope.priceFrom = values[0];
     scope.priceTo   = values[1];
});

Но темлейт не перисовывается в местах {{ priceFrom }} и {{ priceTo }}

Answer 1

[_ _]

Потому что код в on('slide' у вас выполняется вне $apply цикла.

scope.$sliderElemnt.on('slide', function(){
                var values = scope.$sliderElemnt.val();
                scope.$apply(function(){
                   scope.priceFrom = values[0];
                  scope.priceTo   = values[1];
                });                
            });

или

scope.$sliderElemnt.on('slide', function(){
                var values = scope.$sliderElemnt.val();
                
                scope.priceFrom = values[0];
                scope.priceTo   = values[1];
                scope.$digest();
            });