javascript - AngularJS SVG Path directive -

bit of short question, wondering why happening:

in example posted below, there 2 svg elements, each containing directive assigned element. first directive doesn't use template, , setup use assign actions paths.

the second directive trying in order clean code bit, won't drawn.

i googled bit around, , read there difference between svg & dom nodes? since both ng-repeat's working, i'm bit puzzled on going on.

link plunkr: http://plnkr.co/edit/cok6o58souyaghg5jtu5?p=preview

angular.module('app', []).controller("appctrl", function($scope) {     $scope.items = [1,2,3,4];   }).directive('svgpathnoreplace', function() {   return {     restrict: 'a',     scope: true,     link: function(scope, element, attrs) {     }   } }).directive('svgpathreplace', function() {   return {     restrict: 'a',     replace: true,     template: '<path id="1" d="m 85.750001,0 c 38.393651,0 0,39.02444 0,87.15625 c 0,48.13181 38.393651,87.1875 85.750001,87.1875 c 133.10635,174.34375 171.5,135.28806 171.5,87.15625 171.5,39.02444 133.10635,0 85.750001,0 z m 0,1.5 c 132.28206,1.5 170,39.8217 170,87.15625 c 0,47.33455 -37.71794,85.6875 -84.249999,85.6875 c 39.217941,172.84375 1.5,134.4908 1.5,87.15625 1.5,39.8217 39.217941,1.5 85.750001,1.5 z" '+      'style="stroke:#000000;stroke-width:1px;"></path>'   } }); 

the current beta (1.3) allows property on directive called type can specify svg content now.

ie.

return {     restrict : 'ae',     type : 'svg',     template : '<path></path>'     link : function (..) }