How can I set ng-model in jQuery callback

Question

<script>
    $("#point-range").ionRangeSlider({
        min: 0,
        max: 10,
        from: 1,
        from_min: 1,
        from_max: 10,
        step: 1,
        grid: true,
        hide_min_max: true,
        onFinish: function (data) {
            $('#point-value').val(data.from);
        }
    });
</script>

How can I set value for ng-model when onFinish function is called. I try to set value into a hidden input:

onFinish: function (data) {
   $('#point-value').val(data.from);
}

{{ Form::hidden('point', null, ['ng-model' => 'evaluationData.point', 'id' => 'point-value']) }}

But when I submit the form, I don't get evaluationData.point .

Answer 1

Try wrapping that script in a directive.

angular.module('myApp').directive('myDirective', function() {
    return {
        scope: 'ngModel',
        link: function(scope, element, attrs) {
            $("#point-range").ionRangeSlider({
                min: 0,
                max: 10,
                from: 1,
                from_min: 1,
                from_max: 10,
                step: 1,
                grid: true,
                hide_min_max: true,
                onFinish: function (data) {
                    $('#point-value').val(data.from);
                    scope.ngModel = 'Blah';
                    scope.$digest();
                }
            });
        }
    }
})