Highcharts: How to add an arrow head at the tip of a connector in a pie chart?

I would like to be able to add a dot at the tip of a connector in a pie highchart. (using Highcharts 5.0.10)

I learned that there are <marker> svg elements (not to be confused with the highcharts marker api) and these can be added either:

• via css
• as an attribute on the <path> element.

Although I don't see a way to actually apply them.

I tried appending a marker element during the render event in highcharts and then modifying the connector element to add the attribute:

render: function() {
  var marker = '<marker xmlns="http://www.w3.org/2000/svg" id="circle-marker" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto" viewBox="0 0 10 10">'+
                                                '<circle cx="5" cy="5" r="3" style="stroke: none; fill: red;"/>' +
                                             '</marker>';

           if (!$('#circle-marker').length) {
                 $('defs').append(marker);
           }

           $('.highcharts-data-label-connector').attr('marker-end', 'url(#circle-marker)');
            }

Also tried creating a style that would point to that marker.

The more complex part of the issue is I want to make them dynamic (grab the color from the current point).

I might need to get my hands dirtier on SVG (I practically don't know a thing), but also think there is something I am missing from the Highcharts API.

EDIT: This is all done inside an AngularJS directive.