Why is the template not being redrawn?

Question

Angular

Why is the template not being redrawn, the values ​​are changed in the directive.
Directive code:

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

New values ​​are assigned in code

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

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

But the template is not rendered in places {{ priceFrom }} and {{ priceTo }}

Answer 1

Because the code in on('slide' is executed outside the $apply loop.

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

or

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