D3 Pie Chart on AngularJS

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<h1>PieChart</h1>
<div pie-chart="" width="400" height="400" data="data" ng-Contoroler="PieChartController"></div>

JavaScript

function PieChartController($scope) {
    $scope.data = [
        ['Task', 'Hours per Day'],
        ['Work', 11],
        ['Eat', 2],
        ['Commute', 2],
        ['Watch TV', 2],
        ['Sleep', 7]
    ];
}

angular.module('d3', []);

angular.module('d3').directive("pieChart", function () {
        var a = d3.scale.category20c();
        return{
            restrict:"E", 
            scope:{data:"=", width:"=", height:"="}, 
            link:function (c, d, e) {
                var f = +c.width || 400, g = +c.height || 400, h = Math.min(f, g) / 2, i = c.data, j = d3.svg.arc().outerRadius(h - 10).innerRadius(0), k = d3.svg.arc().outerRadius(j.outerRadius()), l = d3.layout.pie().sort(null).value(function (a) {
                return a[1]
            }), m = d3.select(d[0]).append("svg").attr("class", "pie-chart").attr("width", f).attr("height", g + 50).append("g").attr("transform", "translate(" + f / 2 + "," + (g / 2 + 25) + ")");
            c.$watch("data", function (b) {
                var c = m.selectAll(".arc").data(l(b)).enter().append("g").attr("class", "arc");
                c.append("path").attr("d", j).style("fill", function (b) {
                    return a(b.data[0])
                }), c.append("text").style("text-anchor", "middle").text(function (a) {
                    return a.data[0]
                }).attr("dy", ".35em").attr("transform", function (a) {
                        return a.innerRadius = h + 50, a.outerRadius = h, "translate(" + k.centroid(a) + ")"
                    })
            })
        }}
    });