Raphael Circle Gauge - Angular-ized

A cicular 0 to 100% gauge with color feedback. Now Angular-ized as a directive. Based on example code from here: http://stackoverflow.com/questions/5061318/drawing-centered-arcs-in-raphael-js

by Akram kamal

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
<div ng-app="ExampleApp">
    <div ng-controller="GaugeController">        
        <button ng-click="add('testGauge1')">+</button>
        <button ng-click="minus('testGauge1')">-</button>
        
        <div gauge-chart percent="testGauge1"></div>
        
        <button ng-click="add('testGauge2')">+</button>
        <button ng-click="minus('testGauge2')">-</button>
        <div gauge-chart percent="testGauge2"></div>
        
        <hr />
        <div gauge-chart percent="testGauge1"></div>
        <div gauge-chart percent="testGauge2"></div>
            
    </div>
</div>

JavaScript

var app = angular.module('ExampleApp', []);

app.directive('gaugeChart', [function () {
    var size = 100,
        chartWidth = size,
        chartHeight = size,
        centerX = (chartWidth/2),
        centerY = (chartHeight/2),
        radius = size * .3,
        strokeWidth = size * .15;
    
    // Necessary to draw the arc
    function calculateArc (value) {
        var xloc = centerX,
            yloc = centerY,
            total = 100, 
            R = radius,
            alpha = 360 / total * value,
            a = (90 - alpha) * Math.PI / 180,
            x = xloc + R * Math.cos(a),
            y = yloc - R * Math.sin(a),
            path;
        
        if (total == value) {
            path = [
                ["M", xloc, yloc - R],
                ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
            ];
        } else {
            path = [
                ["M", xloc, yloc - R],
                ["A", R, R, 0, +(alpha > 180), 1, x, y]
            ];
        }
        
        return {
            path: path
        };
    }
    
    function calculateStrokeColor (value) {
        var result;
        
        if ( value > 66) {
            result = '#F00';
        } else if ( value > 33) {
            result = '#FF0';
        } else {
            result = '#0F0';
        }
        
        return result;
    }
    
    var declaration = {};
    
    declaration.restrict = 'EA';
    
    declaration.scope = {
        'percent' : '='
    };
    
    declaration.link = function (scope, element, attrs) {
        // Create Canvas
        var paper = Raphael(element[0], chartWidth, chartHeight),
            arc,
            text;
        
        // Attach the custom arc code
        paper.customAttributes.arc = calculateArc;
        
        arc = paper.path().attr({
            "stroke":  '#FFF',
            "stroke-width": strokeWidth,
            arc : 0
        });
        
        text = paper.text().attr({
            x : centerX,
            y :...