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>