Angular-chart / line chart with multiple horizontal lines (margins) - angularjs

Question

I am trying to create an agular line chart that has four horizontal lines (margins - two upper margins and two lower margins). Please see this fiddle - https://jsfiddle.net/CypressMountain/arq34fcu/30/
My objective is to define the properties (value,color,label) of these lines inside angular controller, but not inside JQuery line chart extension, as it is currently done in the fiddle. The graph properties, as well as the margin line properties will come from the back end, and the margin lines will be drawn independently from the graph.
I am not sure how to achieve something like $scope.margins = [] in controller, similar to what we have for $scope.data = [] or $scope.labels... Any help is appreciated.
This is the HTML:
<canvas id="line" class="chart chart-linebis" chart-data="data"
chart-labels="labels" chart-legend="true" chart-series="series"
chart-click="onClick">
</canvas>
The margin lines are now defined in draw function, when the line chart type is being extended
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var lines =
[
{
label: 'Upper margin 1',
value: 90,
color: 'rgba(255, 0, 0, .9)'
},
{
label: 'Upper margin 2',
value: 75,
color: 'rgba(255, 165, 0, .8)'
},
{
label: 'Lower margin 1',
value: -10,
color: 'rgba(0, 165, 255, .8)'
},
{
label: 'Lower margin 2',
value: -25,
color: 'rgba(0, 0, 255, .8)'
}
]
.............................
This is the controller:
angular.module('test', ['chart.js']);
angular.module('test').controller('TestCtrl', function ($scope) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A'];
$scope.data = [
[-5, 48, 40, -19, 86, 27, 90]
];
});
Two previous posts were referenced
angular-chart add horizontal line
and
Chart.js - draw horizontal line

Answer 1

I finally got it resolved and hope this will help someone else who might have a similar task.
$scope.options is the place inside the angular controller where the margin lines' properties will be received from the back end and assigned to $scope.options (you would replace the current hard coded label, value, and color for each horizontal line with the dynamic values).
$scope.options = {
limitLines: [
{
label: 'Upper margin 1',
value: 90,
color: 'rgba(255, 0, 0, .9)'
},
{
label: 'Upper margin 2',
value: 75,
color: 'rgba(255, 165, 0, .8)'
},
{
label: 'Lower margin 1',
value: -10,
color: 'rgba(0, 165, 255, .8)'
},
{
label: 'Lower margin 2',
value: -25,
color: 'rgba(0, 0, 255, .8)'
}
]
}
Then the canvas tag in HTML will have the options added:
chart-options="options"
Finally, in the line chart extension code, in the draw function 'lines' will be bridged to 'limitLines' via options:
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var lines = this.options.limitLines;