javascript - Angular JS: How to call a function inside link from controller in angular directive -

i have created custom directive has link , controller. code is

  var delightmeterapp = angular.module('delightmeterapp', []);     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 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 {             scope: {                 score: '=ngmodel'             },             restrict: 'e',             templateurl: 'svgmeter.html',             link: link,             controller: 'delightmetercontroller'          };     });       delightmeterapp.controller('delightmetercontroller', function ($scope) {         $scope.delightscore = 0;         }); 

i want call scorerotateneedle function inside link controller. call function inside controller on ng-change event html this.

<div ng-controller="delightmetercontroller">     <delight-meter ng-model="delightscore"></delight-meter>     <input id="txtscore" type="text" ng-model="delightscore" />{{delightscore}}  </div> 

since not way include dom manipulations inside controller want have function inside link or elsewhere. how can achieve or should use service ?

update:

<div id="delightmeter">       <svg width='500px' height='300px' version='1.1' xmlns='http://www.w3.org/2000/svg'>          <g>             <text x='100' y='220' fill='black'>0</text>             <text x='300' y='220' fill='black'>100</text>             <path class='arc' id='arc1' d='' />             <path class='arc' id='arc2' d='' />             <path class='arc' id='arc3' d='' />             <path class='arc' id='arc4' d='' />             <path class='arc' id='arc5' d='' />             <g class='needleset'>                 <circle class='needle-center' cx='200' cy='200' r='5'></circle>                 <path class='needle' d='m 195 198 l 200 100 l 205 202'></path>                 <circle class='needle-center' cx='200' cy='200' r='5'></circle>             </g>         </g>      </svg>  </div> 

try in code:

html:

<div ng-controller="delightmetercontroller">     <delightmeter ng-model="delightscore"></delightmeter>     <input id="txtscore" type="text" ng-model="delightscore" />{{delightscore}}  </div> 

directive:

    .directive('delightmeter', function () {     function link($scope, $element, $attrs) {          var meter = $element[0];         console.log(meter);          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 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: 'components/comp01/comp01.html',         scope: {             score: '=ngmodel'         },         link: link     }; }) 

controller:

.controller('delightmetercontroller', function ($scope) {      $scope.delightscore = 0;  })