AngularJs - Error while using index of ng-repeat in map element

I'm trying to launch an ng-click function inside an ng-repeat but I get a problem, while clicking the element, the function always pick the last occurrence of my loop.

To be more precise here's an example:

<div ng-controller="qualityController">
    <div ng-repeat="quality in qualities">
       <img src ={{ asset('bundles/mybundle/img/jauge_normal.png') }} width="160" height="160" alt="Circle" usemap="#circle">
       <div class="g-performance-rate-knob">
          <input type="text" data-angleOffset=180 data-angleArc=360 data-fgColor="#ff7200" data-width="116" data-height="116" data-step="0.1" data-min="0" data-max="100" data-readOnly=true knob class="dial" ng-model="quality.note">
       </div>
       <map name="circle" id="circle" ng-click="loadQualityDetail(quality.id)">
         <area shape="circle" coords="80,80,80" data-toggle="modal" data-target="#modal-stars-{[{ quality.id }]}" class="more" alt=""/>
      </map>
    </div>
</div>

Js:

app.controller('qualityController', function ($scope,$http)
{
    qualities = [];
    qualities.push({id : 1});
    qualities.push({id : 2});
    qualities.push({id : 3});
    qualities.push({id : 4});

    $scope.loadQualityDetail = function(qualityId)
    {
       console.log(qualityId);
    }
});

Wherever I click, I get "4" in my console. Note: I use jQuery Knob library. But it seems like the problem appear on map or area elements.

If you need more information please tell me I could make a fiddle.

Thanks by advance,