SVG ring 4

<div class="container" ng-app="app">

  <div ng-controller="MyCtrl as vm">

    <svg width="400"  viewbox="-300 -300 600 600">

      <g id="circle" style="transform: rotate({{vm.circleRotate}}deg)" ng-class="{ dragging: vm.dragStart }">

        <circle fill="#F1F1F1" cy="0" cx="0" ng-attr-r="{{ ::vm.circleRadius }}"></circle>

        <g ng-repeat="icon in vm.icons" class="icon" ng-attr-transform="{{ 'rotate(-' + vm.iconRotate * $index + ') translate(0, ' + (vm.circleRadius - vm.iconSize) + ')' }}">

          <rect ng-attr-width="{{ ::vm.iconSize }}" 

                ng-attr-height="{{ ::vm.iconSize }}"

                ng-attr-fill="{{ icon.color }}"

                ng-attr-x="{{ ::-(vm.iconSize/2) }}" 

                ng-attr-y="{{ ::-(vm.iconSize/2) }}"></rect>

          <text ng-attr-x="0" ng-attr-y="5"

                text-anchor="middle"

                font-family="Verdana" 

                font-size="20">

            {{ $index }}

          </text>

        </g>

      </g>

    </svg>

​

    <button ng-click='vm.addIcon()'>Add</button>

    <button ng-click='vm.removeIcon()'>Remove</button>

    <input type="number" ng-model="vm.activeIndex"/>

  </div>

</div>