Question

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

Answer 1

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.