How to integrate Google charts as an AngularJs directive?
angularjs, google-visualization
Solution
As you already figured out, you can initialize angular in the html or body tag, without waiting for google charts.
To ensure you don't try to render a chart before the google chart JavaScript code is ready, I would have the directive $watch a new controller $scope property/flag that you set inside the callback function for google.setOnLoadCallback. Inside the $watch callback, check to ensure the flag is set, then do your initialization.
Problem
There are some examples of integrating Google charts as an AngularJs directive. Like this one: http://plnkr.co/edit/YzwjuU?p=preview Update: I want to avoid waiting on google charts to be ready before bootstrapping the whole application (as shown in the example above): ``` google.setOnLoadCallback(function() { angular.bootstrap(document.body, ['myApp']); }); ``` Is there a way to do this in a single module and not on the whole app? Update 2: I have created my plunker and it works without waiting for the callback but I'm not sure if it will work in all cases. http://plnkr.co/edit/7UUfcq4dD7nd4MylB4ni