How to integrate Google charts as an AngularJs directive?

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 w

Answer 1

I was having periodic trouble in Angular with the google chart API not being loaded on time to receive the data from a $http fetch. The data came first sometimes (not always), and then the usage of it in the callback would fail with "google.visualization.DataTable is not a function"

Inside the callback returning data:

var dataTable = new google.visualization.DataTable(data);

To solve it, I found in ng-google-chart.js that there was a promise called "googleChartApiPromise", so I injected it, and wrapped the refresh call in it:

googleChartApiPromise.then(function() {
    refreshCharts();
});

This seems to solve the problem.