Progress indicator using Angular JS
Design a widget that looks like the following:
Please implement an AngularJS directive that renders a circular progress indicator as shown.
The directive should take two float inputs, expected and actual, between 0.0 and 1.0. The thicker outer circle is drawn based on actual, and the thinner inner circle is drawn based on the expected. The text should be the actual. Inline image 1
Please render the widget as a SVG, use D3's arc generator to produce the arcs, and code it using CoffeeScript if possible.
The final output should be as high fidelity as possible. Bonus points for changing the color of the outer ring to orange or red when the actual is more than 25% or 50% behind expected.