JQuery UI slider 'slide' function not setting angularJS value

Question

I'm trying to display the slider values below it by capturing the values from the Slide function and setting it to AngularJS $scope variables but it isn't working.

This is my JS code snippet:

$( "#price-slider" ).slider({
    range: true,
    min: 0,
    max: 1000000,
    values: [ 10000,  500000],
    slide: function( event, ui ) {
        $scope.price_gt = ui.values[0];
        $scope.price_lt = ui.values[1];
    }
});

HTML:

<div id="price-slider"></div>
<p style="text-align: center">&#8377; {{price_gt}} - &#8377; {{price_lt}}</p>

Can anybody please help me understand where I'm going wrong? I basically need to get the value dynamically as the user moves the slide and display it.

Answer 1

Turns out the issue was with AngularJs and not JQuery Slider.

Making this change solved my problem:

slide : function(event, ui) {
            $scope.$apply(function() {
                $scope.price = {
                        lower_limit : ui.values[0],
                        upper_limit : ui.values[1]
                };
            });
        }