making a gviz chart with angular js

I'm trying to make this gviz pie chart from the example here example https://google-developers.appspot.com/chart/interactive/docs/quick_start in angularjs.

What services do I need to write?

The example code above uses

  1. A google ajax library to load the gviz library
  2. A gviz dataTable.
  3. A gviz pie chart
  4. document.getElementById

It seems like I'll need to write my own service for each of these, except $document. Is this true? That seems like an awful lot of boiler plate =/ (Side question, why is wrapping these as a service a good thing?)

Can someone take a stab at what the dataTable service might look like? I'm really not sure how to get access to google.visualization.DataTable() to 'translate' this line.

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

I'd have to give it a closer look, but I would say you would want to create one directive. It looks like cool charting package. If you want some ideas on wrapping components in directives look at the angularjs wiki page (version 1.0.0 ones) on github and then there is an offshoot group angular-ui that I'm involved in that is wrapping and creating some reusable angular components.

Here is a plunker that makes this work, in case anyone needs to do this.

http://plunker.no.de/edit/VB4tDV