AngularJS 1.3.x

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.directive('svgElement', function () {
    return {
      restrict: 'AE',
      replace:true,
      template:
        '<svg height="100" width="100">' +
        '<circle class="chart__circle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />' +
        '</svg>',
      scope: {
      },
      link: function (scope, element, attrs) {
        //console.log(element);
        var children = element.children();
        var circle = angular.element(children[0]);
        circle.addClass("selected");
      }
    }
  });

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div svg-element></div>
  </body>

</html>

.chart__circle{
  fill: #fff;
  radius: 5px;
}
.chart__circle.selected{
    fill: #00f;
  }