bind angularjs currency to scaleLabel in chart.js

Question

I'm working with Angularjs and Chartjs is there a way to bind a currency to the scaleLabel. In Html I would normally do

{{value | currency }} 

This is the label from chartjs graph options

scaleLabel: "<%= '$' + value  %>"

Is there a way to do this instead of having the currency hard coded please?

This is my HTML in which i'm calling controller and $scopes

<div ng-controller="ChartJSController" class="container-fluid">
<div class="row mb-lg">
    <div class="col-lg-12">
        <div>
            <canvas linechart="" options="lineOptions" data="rev" height="667" responsive="true"></canvas>
        </div>
    </div>
</div>

This is the graph data

    $scope.revenueToday = {
    labels: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00'],
    datasets: [
      {
          label: 'My Second dataset',
          fillColor: 'rgba(35,183,229,0.2)',
          strokeColor: 'rgba(35,183,229,1)',
          pointColor: 'rgba(35,183,229,1)',
          pointStrokeColor: '#fff',
          pointHighlightFill: '#fff',
          pointHighlightStroke: 'rgba(35,183,229,1)',
          data: log

      }
    ]
};

And this is where I am setting graph options

    $scope.lineOptions = {
    scaleShowGridLines: true,
    scaleGridLineColor: 'rgba(0,0,0,.05)',
    scaleGridLineWidth: 1,
    bezierCurve: true,
    bezierCurveTension: 0.4,
    pointDot: true,
    pointDotRadius: 4,
    pointDotStrokeWidth: 1,
    pointHitDetectionRadius: 20,
    datasetStroke: true,
    datasetStrokeWidth: 2,
    datasetFill: true,
    scaleLabel: "<%= '$' + value  %>"

};

Answer 1

You can do this, however you'd have to tack your bit of code that does the formatting to some global object (which IMO is not very maintainable). This is how you do it

myApp.controller('myCtrlr', ['$filter', '$scope', function ($filter, $scope) {
    Chart.currencify = function(value) {
        return $filter('currency')(value);
    }
    ...
    ...
    var myChart = new Chart(ctx).Line(data, {
        scaleLabel: "<%=Chart.currencify(value)%>",
    });
}]);

You could tack the currencify function to any global object (I've added it to the Chart js global object). All you have to make sure is that currencify is defined before you initialize the chart (so you could also do it in myApp.run ).

---

Fiddle - http://jsfiddle.net/fntcdtve/