FrAngular : Google Charts Pie 2

<!DOCTYPE html>
<html>
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi?ext.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>
  
  <body ng-controller="Ctrl">
    <pie-chart data="chartData" title="{{chartTitle}}" 
               width="{{chartWidth}}" height="{{chartHeight}}"
               select="selectRow(selectedRowIndex)"></pie-chart>
   
    <div class="left">
      <h2>Chart Data</h2>           
      <table>
        <tr ng-repeat="row in chartData" ng-class="rowClass($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>
    <div class="right">
      <h2>Chart Info</h2>           
      Title: <input ng-model="chartTitle" class="title"><br/>
      Width: <input ng-model="chartWidth"><br/>
      Height: <input ng-model="chartHeight"><br/>
    </div>
    
    <div class="bottom">
      Try adding a new row, removing a row, modifying a value or a label, selecting a sector 
      on the chart, or even changing the chart title or dimensions.
      <br/><br/>
      data: {{chartData}}
    </div>
  </body>

</html>

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

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

app.directive('pieChart', function ($timeout) {
  return {
    restrict: 'EA',
    scope: {
      title:    '@title',
      width:    '@width',
      height:   '@height',
      data:     '=data',
      selectFn: '&select'
    },
    link: function($scope, $elm, $attr) {
      
      // Create the data table and instantiate the chart
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Label');
      data.addColumn('number', 'Value');
      var chart = new google.visualization.PieChart($elm[0]);

      draw();
      
      // Watches, to refresh the chart when its data, title or dimensions change
      $scope.$watch('data', function() {
        draw();
      }, true); // true is for deep object equality checking
      $scope.$watch('title', function() {
        draw();
      });
      $scope.$watch('width', function() {
        draw();
      });
      $scope.$watch('height', function() {
        draw();
      });

      // Chart selection handler
      google.visualization.events.addListener(chart, 'select', function () {
        var selectedItem = chart.getSelection()[0];
        if (selectedItem) {
          $scope.$apply(function () {
            $scope.selectFn({selectedRowIndex: selectedItem.row});
          });
        }
      });
        
      function draw() {
        if (!draw.triggered) {
          draw.triggered = true;
          $timeout(function () {
            draw.triggered = false;
            var label, value;
            data.removeRows(0, data.getNumberOfRows());
            angular.forEach($scope.data, function(row) {
              label = row[0];
              value = parseFloat(row[1], 10);
              if (!isNaN(value)) {
                data.addRow([row[0], value]);
              }
            });
            var options = {'title': $scope.title,
                           'width': $scope.width,
                           'height': $scope.height};
            chart.draw(data, options);
            // No raw selected
            $scope.selectFn({selectedRowIndex: undefined});
          }, 0, true);
        }
      }
    }
  };
});

app.controller('Ctrl', function($scope) {
  // Initial chart data
  $scope.chartTitle = "My Daily Activities";
  $scope.chartWidth = 500;
  $scope.chartHeight = 320;
  $scope.chartData = [
    ['Work',     11],
    ['Eat',      2],
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
  ];
  
  $scope.deleteRow = function (index) {
    $scope.chartData.splice(index, 1);
  };
  $scope.addRow = function () {
    $scope.chartData.push([]);
  };
  $scope.selectRow = function (index) {
    $scope.selected = index;
  };
  $scope.rowClass = function (index) {
    return ($scope.selected === index) ? "selected" : "";
  };
});

body {
  font-size: 0.9em; 
}
pie-chart {
}
.bottom {
  clear: both;
  font-size: 0.9em;
  color: grey;
  padding: 2em 1em 0 1em;
}
h2 {
  font-size: 1.3em;
  margin: 0.8em 0.5em 0.1em 0.5em;
}
input {
  font-size: 0.8em;
  width: 6em;
}
input.title {
  width: 12em;
}
tr.selected td {
  background-color: red;
}
.left {
  float: left;
  margin-right: 4em;
}