Angular 1.3.0-beta.19 SVG custom element

custom-circle.js

/**
  creates a circle in the upper left corner of its container
  with the given radius. `<custom-circle radius="10"/>`
*/
app.directive('customCircle', function(){
  return {
    // the following two configuration options are 
    // required for SVG custom elements.
    templateNamespace: 'svg',
    replace: true, 
    
    // NOTE: ng-attr- style binding is used to prevent SVG validation
    // error messages.
    template: '<circle ng-attr-cx="{{radius}}" ng-attr-cy="{{radius}}" ng-attr-r="{{radius}}"/>',
    
    // everything else as normal
    scope: {
      radius: '@',
    }
  };
});