SVG circle (clock) of clickable objects from an array

I'm trying to create the following:

Giving an array of objects, that every object represents a clickable line.

In the end it needs to look like the image below.

my code works mostly but i have 2 problems:

1: when looking in the log there are allot off errors.

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Error: Invalid value for <rect> attribute transform="{{min.rotate}}"

2: the onClick isn't working (probably because of the errors)

My directive code:

    app.directive('clock24', ['$filter','$rootScope', function($filter,$rootScope) {
var linkFunction = function(scope, element, attributes) {
    scope.obj = attributes["clock24"];
    scope.hrs = [12,1,2,3,4,5,6,7,8,9,10,11];
    scope.mins = [];

    for(var i=0 ; i<60; i++){
      scope.mins.push(i)
    }


    scope.getHrs = function(){
        var res = [];
        var rotate = 0;
        var raze = 360/ scope.hrs.length;
        angular.forEach(scope.hrs, function(hr, key) {
            this.push({"key":key,"id":hr,"rotate":"rotate("+rotate+" 250 250)"});
            rotate+=raze;
        }, res);
        return res;
    };


     scope.getMins = function(){
        var res = [];
        var rotate = 0;
        var raze = 360/ scope.mins.length;
        angular.forEach(scope.mins, function(min, key) {
            this.push({"key":key,"id":min,"rotate":"rotate("+rotate+" 250 250)"});
            rotate+=raze;
        }, res);
        return res;
    };



};
return {
    restrict: 'A',
    scope: false,
    templateUrl: 'clockTemplate.html',
    link: linkFunction
  }
 }]);

My template code:

  <div class="timingClock">
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"            xml:space="preserve" style="shape-rendering:geometricPrecision; text- rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 500 500">
 <defs>
 <script type="text/ecmascript"><![CDATA[
  function changeRect(evt) {
      var svgobj=evt.target;
      // svgobj.style.opacity= 0.3;
      // svgobj.setAttribute ('x', 300);
      alert(svgobj.id);
  }
  ]]>
 </script>

 <radialGradient id="toning" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color: black; stop-opacity:0.3"/>
      <stop offset="100%" style="stop-color: #8c770d; stop-opacity:0.1"/>
 </radialGradient>
 </defs>

  <g id="UrTavla">
       <circle style="fill:none;stroke:#010101;stroke-width:1.6871;stroke-miterlimit:10;" cx="250" cy="250" r="245"></circle>

<g id="markeringar" class="Mrk">
  <rect  ng-repeat="hr in getHrs()"   x="245" y="5" width="20" height="20" id="{{hr.id}}"  onclick="changeRect(evt)" transform="{{hr.rotate}}"  ></rect>
  <rect  ng-repeat="min in getMins()" x="249" y="5" height="10" width="2"  id="{{min.id}}" onclick="changeRect(evt)" transform="{{min.rotate}}" ></rect>

</g>

plunker

Thanks a lot.

Avi