将html附加到具有范围值的指令内部

我正在尝试制作一个饼图指令，我使用了highcharts指令，但我也想添加另一行文字，例如"60%"左右。到目前为止，我尝试了这个

app.directive('pieGraph', function($compile) {
  return {
    restrict: 'C',
    scope: {
      value: '@',
      color: '@'
    },
    link: function(scope, elem) {
      elem.highcharts({
        chart: {
          type: 'pie',
          backgroundColor: null
        },
        title: {
          text: null
        },
        yAxis: {
          title: {
            text: 'Total percent market share'
          }
        },
        plotOptions: {
          pie: {
            shadow: true
          }
        },
        legend: {
          enabled: false
        },
        credits: {
          enabled: false
        },
        exporting: {
          enabled: false
        },
        tooltip: {
          enabled: false
        },
        series: [{
          name: '',
          data: [
            {
              name: 'a',
              y: parseInt(scope.value, 10),
              color: scope.color
            },
            {
              name: 'b',
              y: (100 - parseInt(scope.value, 10)),
              color: '#ffffff'
            }
          ],
          size: '100%',
          innerSize: '90%',
          dataLabels: {
            enabled: false
          }
        }]
      });
      var graph = angular.element('<span class="pie-graph-value">{{scope.value}}<sup>%</sup></span>');
      $compile(graph)(scope);
      elem.append(graph);
    }
  };
});

但这个问题是，我最后应用的sai只是%，而不是值和百分比符号。我最后在编译的东西上做错了什么吗？

提前谢谢你，丹尼尔！