AngularJS: Google Charts Pie

by pbespechnyi

HTML

<script src="http://www.google.com/jsapi?ext.js"></script>
<body ng-controller="Ctrl">
    <pie-chart data="chartData" title="{{chartTitle}}" width="{{chartWidth}}" height="{{chartHeight}}" select="selectRow(selectedRowIndex)"></pie-chart>
    <p>Since this is a demo, lets add fields instead of connecting to db...</p>
    <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)">&times;</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>
</body>

CSS

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;
}

JavaScript

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...