How to include angular JS expressions inside an SVG circle

I have the following html code to create concentric circles.

<div id="delightmeter">

  {{delightScore}}
    <svg width='500px' height='300px' version='1.1' xmlns='http://www.w3.org/2000/svg'>


            <g class=''>


                <circle class='' cx='200' cy='60' r='20'></circle>
                <circle class="" cx='200' cy='60' r='17' ></circle>


        </g>

    </svg>

</div>

I have another JS file in which i do some operations using angular JS and i have the value in a $scope variable. Is there any way to access the variable from the other file and show it inside the svg circle

Update:

'use strict';

angular.module('delightMeterApp', [

])
    .directive('delightMeter', function () {
        function link($scope, $element, $attrs) {


            document.getElementById("arc1").setAttribute("d", describeArc(200, 200, 100, -90, -56));
            document.getElementById("arc2").setAttribute("d", describeArc(200, 200, 100, -54, -20));
            document.getElementById("arc3").setAttribute("d", describeArc(200, 200, 100, -18, 16));
            document.getElementById("arc4").setAttribute("d", describeArc(200, 200, 100, 18, 52));
            document.getElementById("arc5").setAttribute("d", describeArc(200, 200, 100, 54, 90));



            function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
                var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;

                return {
                    x: centerX + (radius * Math.cos(angleInRadians)),
                    y: centerY + (radius * Math.sin(angleInRadians))
                };
            }
            /* Function to draw single arcs recieving (start co-ordinateX,start co-ordinateY,radius,start angle, end angle) */
            function describeArc(x, y, radius, startAngle, endAngle) {

                var start = polarToCartesian(x, y, radius, endAngle);
                var end = polarToCartesian(x, y, radius, startAngle);
                var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";
                var d = [
                    "M", start.x, start.y,
                    "A", radius, radius, 0, arcSweep, 0, end.x, end.y
                ].join(" ");
                return d;
            }


            function ScoreRotateNeedle(delightScore) {
                $('.needleset').css({
                    "transform": "rotate(" + delightScore + "deg)",
                    "transform-origin": "50% 95%"
                });
            }

            $scope.$watch('score', function () {
                ScoreRotateNeedle($scope.score);
            });

        }

        return {
            restrict: 'E',
            templateUrl: 'svgmeter.html',
            scope: {
                score: '=ngModel'
            },
            link: link
        };
    })
    .controller('delightMeterController', function ($scope) {
$scope.delightScore = 0;



    })

I need to access the delightScore variable from inside custom directive in my html template.