How to set value in data-plugin-options from Angular?

Question

I want to know how can I set the value of a control which is using data-plugin-options to set the values for a gauge control.

I have this html markup:

<div class="form-group" style="text-align: center;">
                    <div class="demo-label">Average Speed</div>
                    <div style="text-align: center;">
                        <div class="gauge-chart">
                            <canvas id="gaugeBasic" width="180" height="110" data-plugin-options='{ "value": 2150, "maxValue": 3000 }'></canvas>

                            <label id="gaugeBasicTextfield"></label>
                        </div>
                    </div>
                </div>

Using another different control, which is Angular directive, I'm able to declare and set the value I need like this

<ridge-speedometer x-val="AverageSpeed"/>

Now instead of that control I want to use the markup above, and where the value of 2150 is currently, I want to use the AverageSpeed value.

How can I do that?

Answer 1

For AverageSpeed to be available on the UI, you need to attach it to the controller, or $scope like so:

$scope.AverageSpeed = 2150;

And what you should really do for cleanliness sake is extract that object from data-plugin-options to your controller as well, like so:

$scope.options = {
    value: $scope.AverageSpeed,
    maxValue: 3000
}

And then plug it in to your UI as such:

<canvas id="gaugeBasic" width="180" height="110" data-plugin-options="options"></canvas>