Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
  <svg class="progress" ng-repeat="circle in circles" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" style="width: 50px; height: 50px; transform-origin: 25px 25px 25px;">
    <text transform="rotate(90,25,25)" x="25" y="25" alignment-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="15">
      {{circle.percentage}}%
    </text>
    <circle cx="25" cy="25" r="22.5" stroke="rgb(188,188,188)" stroke-width="5" fill="none"></circle>
    <circle cx="25" cy="25" r="22.5" stroke="rgb(0,51,117)" stroke-width="5" fill="none" stroke-dasharray="{{circle.circumference}}" stroke-dashoffset="{{circle.circumference * (1 - circle.percentage/100)}}"></circle>

  </svg>
</div>

CSS

.progress {
  transform: rotate(-90deg);
}

JavaScript

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

function MyCtrl($scope) {
		var radius = 22.5;
    var circumference = Math.PI*(radius*2);
    $scope.circles = [];
    for(var i=0; i<=10; i++){
      var circle = {
        percentage : i* 10,
        circumference: circumference
      };
      $scope.circles.push(circle);
    }
}