angularjs - Where is the appropriate place to instantiate a javascript widget/chart/utility when using angular.js? -

i'm using chart.js make, unsurprisingly, chart, , i'm trying figure out how cleanly , correctly rewrite code in angular.js.

vanilla implementation

if using vanilla javascript , html, i'd boils down this:

<canvas id='chart'></canvas> <script>     data = {...} // dictionary of chart data, omitted brevity     options = {...} // dictionary of chart options, same^     var ctx = document.getelementbyid("chart").getcontext("2d");     var chart = new chart(ctx).line(data, options); </script> 

and first canvas load, script run , draw chart.

angular

but angular, can have, instead,

<ng-chart></ng-chart> <script>     angular.module('app')     .directive('ngchart', function(){         return {             restrict: 'e',             template: '<canvas></canvas>'             ...         }     ) </script> 

and put same javascript first example inside directive.

...

but where?

it seems should in either link function, or controller. need dom elements load first, because otherwise drawing on canvas won't work--but doesn't seem limit it. able re-draw graph, can add ability filter/rescale graph without reloading whole page.

under link property.

<script>     angular.module('app')     .directive('ngchart', function(){         return {             restrict: 'e',             link: function (scope, element, attrs, controllers) {                 //your plugin implementation here                 data = {...} // dictionary of chart data, omitted brevity                 options = {...} // dictionary of chart options, same^                 var ctx = element.getcontext("2d");                 var chart = new chart(ctx).line(data, options);             }             template: '<canvas></canvas>'          }     ) </script>