javascript - Creating dynamic link with ui-sref inserting with highcharts -

i'm trying create category xaxis acts links other areas of app. want avoid using href because reload everything. have core of problem down, think.

labels: {     formatter: function () {         let newvar = $compile(`<a class="link">${this.value} - ${vm.tabledata.contentmain[this.pos].bothneeded} - ${vm.tabledata.contentmain[this.pos].percentagecompleted}</a> - `)($scope)          return angular.element(newvar[0]);     },     usehtml: true } 

my problem [object object] shows on page instead of link. believe need compile in order ui-sref work, why there. creating these dynamic links appreciated!

i running angular 1.6 in case matters

update

hopefully misunderstanding how $compile works. here bad, non-working example outside of highcharts

http://jsfiddle.net/hb7lu/31241/

from highcharts docs formatter returns string. have nothing it. $compile generated dom element has been regestered digest cycle. not out case.

however can generate string like:

 formatter: function () {        return '<div style="width:70px" onclick="alert(\''+this.value+'\')">'+$scope.somevalues[this.value]+'</div>';            }, 

demo fiddle

i want avoid using href ...

you can build custom href modifieng based on this.vaue

---

as side note:

when print in dom $compiled object, like: {"0":{"ng-1505336047666":6},"length":1} 0 id of $scope , 1505336047666 element id regenerates each build