The directive right now has hardcoded styles for color, text size, etc...

For better separation of concern and ease of use by designers, it's better to name elements with different css classes and then define the style for those classes in the css file.

It also makes it easier for people to re-use the directive in different places and re-skin it via CSS, vs being tied to one color scheme.

I suggest adding a .gitignore file and ignoring the .DS_Store files that OS X likes to create.

.attr 'transform', 'translate('+actualArcRadius+','+actualArcRadius+')'

can be done via interpolation

.attr 'transform', "translate(#{ actualArcRadius }, #{ actualArcRadius })"
# note that string interpolation is only active when using double quote ", and not when using single quote '

Please read the unit testing developer guide at https://docs.angularjs.org/guide/unit-testing and add some unit tests to check that the arcs are drawn correctly.

D3 has really great support for tweening.
http://bl.ocks.org/mbostock/5100636

Please add animation to the arcs.