NVD3 Donut Chart

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<div class='chart'>
  Donut chart
</div>

JavaScript

angular.module('charts', [])
  .directive('donut', ['$timeout', 'debounce', function($timeout, debounce) {
    return {
      restrict: 'E',
      template: '',
      replace: true,
      link: function (scope, elem, attrs) {
          var renderChart =  function() {
              var data = scope.$eval(attrs.uiChart);
              elem.html('');
              if (!angular.isArray(data)) {
                return;
              }

              var opts = {};
              if (!angular.isUndefined(attrs.chartOptions)) {
                opts = scope.$eval(attrs.chartOptions);
                if (!angular.isObject(opts)) {
                  throw 'Invalid ui.chart options attribute';
                }
              }
              $timeout(function(){
                elem.jqplot(data, opts);
              }, 500);

        };

        scope.$watch(attrs.uiChart, renderChart );
        //scope.$watch(attrs.chartOptions, renderChart, true);

        $(window).resize(debounce(2000,renderChart));

        scope.$on("$destroy",function() {
          $( window ).off( "resize.Viewport" );
        });

      }
    };
  }]);