ng-disable doesn't work within SVG element

I'm working on an angularjs directive where a circle element needs to be disabled once it has been clicked on once. The ng-click event works as expected, but the ng-disable is not working. I can see the disabled class being added in the html, but the clicking event is still being triggered.

Any thoughts?

<svg width="100" height="100">
      <circle ng-disabled="disableme" ng-click="clickme()" ng-init="count=0" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.clickme = function () {
    $scope.count=$scope.count+1;
    $scope.disableme = true;
  };

http://plnkr.co/edit/dK07QfKoA9qOrNsdlypE?p=preview

ng-disabled does not work on svg. Alternatively, you can do this with ng-class

.disable {
     pointer-events: none;
     opacity: 0.5; 
 }

Add the ng-class to the svg element

 <svg width="100" height="100"  ng-class="{'disable': disableme}">
      <circle ng-click="clickme()" ng-init="count=0" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>

Demo