         svg = d3.select('svg')
             .append('g')
                 .attr("transform", "translate(#{svgWidth/2}, #{svgHeight/2})") 
-        console.log("SVG: "+svg)
-        console.log("attrs "+attrs)
-        console.log("scope #{scope.actual}")
-        console.log("Actual #{attrs.actual}")
-        console.log("Expected #{attrs.expected}")
+        # console.log("SVG: "+svg)
+        # console.log("attrs "+attrs)
+        # console.log("scope #{scope.actual}")
+        console.log("Actual: #{attrs.actual}")
+        console.log("Expected: #{attrs.expected}")
+        drawBothArcs()
+        drawCircle(innerPercent, circleRadius)
+        scope.$watch 'expected', transitionBothArcs
+        scope.$watch 'actual', transitionBothArcs
 
-        scope.$watch 'expected', drawExpectedArc
-        scope.$watch 'actual', drawActualArc
-
-        # drawArc(scope.expected, innerRadius, innerThickness, 0)
-        # drawArc(scope.actual, outerRadius, outerThickness, 
-        #     arcColorIsRed(scope.actual, scope.expected))
-        drawCircle(innerPercent, circleRadius)
-        drawText(scope.actual)

outerPercent = .50
innerThickness = 10
outerThickness = 20

app.directive "progressCircle", ($parse, $window) ->
    restrict: "EA"
    replace: true
    template: "<svg width='#{svgWidth}' height='#{svgHeight}'></svg>"

            #     .text(percent)

        # take value from 0-1 and draw arc
        drawArc = (percent, radius, thickness, colorIsRed, arcClass) ->
            console.log("drawArc: #{percent}, #{radius}")
            color = defaultArcColor
            arc = d3.svg.arc()
                .innerRadius radius - thickness
                .outerRadius radius
