D3 animation (transition) does NOT work on Angular app

Question

I have hacked a directive containing a simple pie chart inside a directive. Here is the exact sample in jsfiddle that works. But once I am trying to move this to my web app, I get the graph being built on top of the previous session (overlay) but no animation. I get no console errors. When I do a log for the data, the data is passing correctly.

Here is the software I am currently using: AngularJS v1.2.1, D3 version: "3.4.13", which is being hosted by Express and NodeJS.

Any suggestions of to what could cause this error. I don't want to have to reset the SVG every-time I get new data, I want a smooth transition.

var App = angular.module('App', ['ngRoute', 'ngCookies']);
App.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();
   .............//rest is the same as the js fiddle example

Answer 1

Working on ang angularjs/D3js web application I found the I had imported some libraries that cause D3 transition to crash. Here is the list of other libraries that cause d3 animation to crash: -Bootstrap v2.0.4 -Bootstrap Responsive v2.0.4 -Date.js (Website: http://www.datejs.com/ or http://www.coolite.com/datejs/ ). Once these libs where disabled. I was able to see and use transitions.