angular factory to modify svg on page - angularjs

Question

This is a follow-up to this question, though they're only loosely related.
My factory is intended to place some svg boxes around some breadcrumb links.
My question is: is a factory the right way to do this? A factory should produce something and hand it back. Can I operate on an existing element? Or should I rip the element out of my HTML and have the whole HTML block generated in my factory, then return it to my controller?
Controller:
...
$scope.linkStages = [{'view': 'twitter'}, {'view': 'ad'}, {'view':'campaign'}];
...
var coordinates = function(i) {
i = Number(i);
var x1 = i * stagesWidth + ',' + 0 + ' ';
var x2 = i * stagesWidth + ',' + stagesHeight + ' ';
var x3 = (i + 1) * stagesWidth + ',' + stagesHeight + ' ';
var x4 = (i + 1) * stagesWidth + stagesHeight/2 + ',' + (stagesHeight/2) + ' ';
var x5 = (i + 1) * stagesWidth + ',' + 0;
return x1 + x2 + x3 + x4 + x5;
};
/*
* Calculate the position of the text inside a polygon
* type 'y' will give the y coordinate
* type not 'y' will given you the x coordinate
* i is the position the polygon appears in the guide bar
*/
var textCoord = function(i, type) {
if (type === 'y') {
return (stagesHeight/2) + 5;
} else {
return ((Number(i) + 0.5) * stagesWidth);
}
};
Factory:
// add fields to linkStage objs for visual display
for (var i in linkStages) {
linkStages[i].title = '';
linkStages[i].points = coordinates(i);
linkStages[i].textX = textCoord(i, 'x');
linkStages[i].textY = textCoord(i, 'y');
}
HTML:
<span class="exportBar">
<div class='svgContainer'>
<svg sys-width='{{svgWidth}}' height='35' >
<polygon ng-repeat="stage in linkStages.slice().reverse()" sys-points="{{stage.points}}" ng-class="exportView === stage.view ? 'selected': 'none'"/>
<text ng-repeat="stage in linkStages" text-anchor="middle" sys-x="{{stage.textX}}" sys-y="{{stage.textY}}">{{stage.title | cut:false:12:'...'}}</text>
</svg>
</div>
</span>
Directive:
angular.module('sysomos.ads').
directive('sysX', [
function() {
return function(scope, element, attrs) {
attrs.$observe('sysX', function(value) {
attrs.$set('x', value);
});
};
}
])
...
directive('sysPoints', [
function() {
return function(scope, element, attrs) {
attrs.$observe('sysPoints', function(value) {
attrs.$set('points', value);
});
};
}
]).
directive('sysWidth', [
function() {
return function(scope, element, attrs) {
attrs.$observe('sysWidth', function(value) {
attrs.$set('width', value);
});
};
}
]);