D3.js and AngularJS DONUT ANIMATION

AngularJs + d3Js + bar chart example usign directives

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">
    
    <bars-chart chart-data="myData"  ></bars-chart>
    <br>
    <input type="text" ng-model="todo.done">{{todo.done}}
        <button ng-click="random()" type="button">random!</button>
</div>

CSS

.chart {
    background: #eee;
    padding: 3px;
}

.chart div {
  width: 0;
  transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
}

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 5px;
  color: white;
  box-shadow: 2px 2px 2px #666;
}

JavaScript

angular.module('myApp', []).
directive('barsChart', function($parse) {
    d3.edge = {};

    d3.edge.donut = function module() {

        var width = 460,
            height = 300,
            radius = Math.min(width, height) / 2;

        var color = d3.scale.category20();


        var dispatch = d3.dispatch("customHover");

        function graph(_selection) {
            _selection.each(function(_data) {
                var pie = d3.layout.pie()
                    .sort(null);

                var arc = d3.svg.arc()
                    .innerRadius(radius - 100)
                    .outerRadius(radius - 50);

                var svg = d3.select(this).select("svg > g");
                if (svg.empty()) {
                    var svg = d3.select(this).append("svg")
                        .attr("width", width)
                        .attr("height", height)
                        .append("g")
                        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
                }
                var path = svg.selectAll("path")
                    .data(pie);
                path
                    .enter().append("path")
                    .attr("fill", function(d, i) {
                        return color(i);
                    })
                    .attr("d", arc)
                    .each(function(d) {
                        this._current = d;
                    });

                path.transition()
                    .ease("elastic")
                    .duration(750)
                    .attrTween("d", arcTween);

                path.exit().remove();

                function arcTween(a) {
                    var i = d3.interpolate(this._current, a);
                    this._current = i(0);
                    return function(t) {
                        return arc(i(t));
                    };
                }
            });

        }
        d3.rebind(graph, dispatch, "on");
        return graph;
    }

    var...