ionRangeSlider绑定两个滑块

Question

我遇到绑定两个滑块的问题，这里是我拥有的： 视图：

                                <div ion-range-slider range-options="onHourOptions"></div>
                                    <p>The value so far is: <span>{{hourValue | number: 2}}$/h</span></p>

                                    <div ion-range-slider range-options="onMonthOptions"></div>
                                    <p>The value so far is: <span>{{monthValue| number: 2}}$</span></p>

控制器：

   $scope.onHourOptions = {
        min: 0,
        max: 90,
        type: 'single',
        step: 0.1,
        postfix: " $/h ",
        prettify: true,
        hasGrid: true,
        onChange: function (data) {
            $scope.hourValue = data.fromNumber;
            $scope.monthValue = data.fromNumber*168;
            $scope.$apply();
        },
    };

    $scope.onMonthOptions = {
            min: 1600,
            max: 15000,
            type: 'single',
            step: 10,
            postfix: " $ ",
            prettify: false,
            hasGrid: true,
            onChange: function (data) {
                $scope.monthValue = data.fromNumber;
                $scope.hourValue = data.fromNumber/168;
                $scope.$apply();
            },
        };

我的滑块指令：

function ionRangeSlider() {
    return {
        restrict: 'A',
        scope: {
            rangeOptions: '='
        },
        link: function (scope, elem, attrs) {
            elem.ionRangeSlider(scope.rangeOptions);
        }
    }
}

现在我希望得到类似的结果：当用户更改月份的付款值时，将自动更新小时付款的值。我不知道我怎么能做到这一点。我试图添加类似这样的事件$ scope.onHourOptions.from = data.fromNumber / 168;但没有任何事情发生。