FrAngular : Google Charts Pie

HTML

<script src="http://www.google.com/jsapi?ext.js"></script>
<div ng-controller="Ctrl">
    <pie-chart data="chartData" title="Pie Chart" 
               select-handler="select"
               width="450" height="350"></pie-chart>
    <table>
      <tr ng-repeat="row in chartData" ng-class="classes($index)">
        <td>
          <input ng-model="row[0]">
          <input ng-model="row[1]">
          <button ng-click="deleteRow($index)">X</button>
        </td>
      </tr>
    </table>
    <button ng-click="addRow()">Add new row</button>
    <div class="jsonData">{{chartData}}</div>
  </div>

CSS

pie-chart {
  float: right;
}
.jsonData {
  clear: both;
  font-size: 0.8em;
  color: grey;
  margin: 2em;
}
input {
  font-size: 0.7em;
  width: 6em;
}
tr.selected td {
  background-color: red;
}

JavaScript

google.setOnLoadCallback(function() {
    angular.bootstrap(document.body, ['app']);
});
google.load('visualization', '1', {packages: ['corechart']});

var app = angular.module('app', []);

app.directive('pieChart', function () {
  return {
    restrict: 'E',
    link: function($scope, $elm, $attr) {
      // Set chart options
      var options = {'title': $attr.title,
                     'width': $attr.width,
                     'height': $attr.height};

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart($elm[0]);

      var selectHandler = $scope[$attr.selectHandler];
      if (selectHandler && angular.isFunction(selectHandler)) {
        google.visualization.events.addListener(chart, 'select', function () {
          var selectedItem = chart.getSelection()[0];
          if (selectedItem) {
            selectHandler.call(undefined, selectedItem.row);
            $scope.$apply();
          }
        });
      }
        
      function draw() {
        var label, value;
        data.removeRows(0, data.getNumberOfRows());
        angular.forEach($scope[$attr.data], function(row) {
          label = row[0];
          value = parseInt(row[1], 10);
          if (!isNaN(value)) {
            data.addRow([row[0], value]);
          }
        });
        chart.draw(data, options);
        if (selectHandler && angular.isFunction(selectHandler)) {
          selectHandler.call(undefined, undefined);
        }
      }
      $scope.$watch($attr.data, function() {
        draw();
      }, true); // true is for deep object equality checking
      
    }
  };
});

app.controller('Ctrl', function($scope) {
  $scope.chartData = [
    ['Mushrooms', 3],
    ['Onions', 1],
    ['Olives', 1],
    ['Zucchini', 1],
    ['Pepperoni', 2]
  ];
 ...