var angles = angular.module("angles", []);

angles.chart = function (type) {
    return { 
        restrict: "A",
        scope: {
            data: "=",
            options: "=",
            id: "@",
            width: "=",
            height: "=",
            resize: "=",
            chart: "@"
        },
        link: function ($scope, $elem) {
            var ctx = $elem[0].getContext("2d");
            var autosize = false;

			$scope.size = function () {
	            if ($scope.width <= 0) {
	                $elem.width($elem.parent().width());
	                ctx.canvas.width = $elem.width();
	            } else {
	                ctx.canvas.width = $scope.width || ctx.canvas.width;
	                autosize = true;
	            }

                if($scope.height <= 0){
                    $elem.height($elem.parent().height());
                    ctx.canvas.height = ctx.canvas.width / 2;
                } else {
                    ctx.canvas.height = $scope.height || ctx.canvas.height;
                    autosize = true;
                }
			}

            $scope.$watch("data", function (newVal, oldVal) { 
                if(chartCreated)
                    chartCreated.destroy();
                    
                // if data not defined, exit
                if (!newVal) {
                  return;
                }
                if ($scope.chart) { type = $scope.chart; }
                
                if(autosize){
                    $scope.size();
                    chart = new Chart(ctx);
                } else if (!newVal) return;
                
                chartCreated = chart[type]($scope.data, $scope.options);
                chartCreated.update();
            }, true);
            
            if ($scope.resize) {
		        angular.element(window).bind('resize', function () {
		            $scope.size();
		            chart = new Chart(ctx);
                    chartCreated = chart[type]($scope.data, $scope.options);
		        });
                //unbind the event when scope destroyed 
                $scope.$on("$destroy", function() {
                    angular.element(window).off();
                });
            }
            $scope.size();
            var chart = new Chart(ctx);
            var chartCreated;
        }
    }
}


/* Aliases for various chart types */
angles.directive("chart", function () { return angles.chart(); });
angles.directive("linechart", function () { return angles.chart("Line"); });
angles.directive("barchart", function () { return angles.chart("Bar"); });
angles.directive("radarchart", function () { return angles.chart("Radar"); });
angles.directive("polarchart", function () { return angles.chart("PolarArea"); });
angles.directive("piechart", function () { return angles.chart("Pie"); });
angles.directive("doughnutchart", function () { return angles.chart("Doughnut"); });
angles.directive("donutchart", function () { return angles.chart("Doughnut"); });

@@ -290,16 +290,123 @@
 art: %22@%22
+,%0A            segments: %22@%22,%0A            responsive: %22=%22,%0A            tooltip: %22=%22,%0A            legend: %22=%22
 %0A       
@@ -1234,17 +1234,16 @@
 ldVal) %7B
- 
 %0A       
@@ -1423,24 +1423,26 @@
             
+  
 return;%0A    
@@ -1661,51 +1661,240 @@
    %7D
- else if (!newVal) return;%0A                
+;%0A%0A                if($scope.responsive %7C%7C $scope.resize)%0A                    $scope.options.responsive = true;%0A%0A                if($scope.responsive !== undefined)%0A                    $scope.options.responsive = $scope.responsive;%0A
 %0A   
@@ -2010,39 +2010,8 @@
     
-        %7D, true);%0A            %0A
     
@@ -2020,25 +2020,24 @@
       if
- 
 ($scope.
 resize) 
@@ -2032,20 +2032,28 @@
 ope.
-resize) %7B%0A%09%09
+legend)%0A            
     
@@ -2076,380 +2076,680 @@
 ent(
-window).bind('resize', function () %7B%0A%09%09            $scope.size();%0A%09%09            chart = new Chart(ctx);%0A                    chartCreated = chart%5Btype%5D($scope.data, $scope.options);%0A%09%09        %7D);%0A                //unbind the event when scope destroyed %0A                $scope.$on(%22$destroy%22, function() %7B%0A                    angular.element(window).off();%0A                %7D
+$elem%5B0%5D).parent().after( chartCreated.generateLegend() );%0A            %7D, true);%0A%0A            $scope.$watch(%22tooltip%22, function (newVal, oldVal)%7B%0A                chartCreated.draw();%0A                if(newVal===undefined %7C%7C !chartCreated.segments)%0A                    return;%0A                if(!isFinite(newVal) %7C%7C newVal %3E= chartCreated.segments.length %7C%7C newVal %3C 0)%0A                    return;%0A                var activeSegment = chartCreated.segments%5BnewVal%5D;%0A                activeSegment.save();%0A                activeSegment.fillColor = activeSegment.highlightColor;%0A                chartCreated.showTooltip(%5BactiveSegment%5D);%0A                activeSegment.restore(
 );%0A 
@@ -2752,32 +2752,41 @@
 );%0A            %7D
+, true);%0A
 %0A            $sc

Add responsiveness and auto generate legend