javascript - How can I map snap SVG circle via angular JS? -

i want set radius of snap svg circle through input box of angularjs, want make dynamic on run time. knows correct way it?

 <div class="app" ng-app ng-style="disablecircle">     <div ng-controller="ctrlsizing">         <label id="rad" style="visibility: hidden">radius: <input ng-model="rad" type="number" placeholder="how 300?"></label>         <div id="circle">             <svg id="svg" visibility="hidden" onclick="cinput()" style="height: 800; width: 500; position:absolute; left: 100px;top: 100px;"></svg>         </div>     </div> </div> <script>     var s = snap("#svg");     var circle = s.circle(150,150,100);  </script> 

you create circle when controller loads , this:

var app = angular.module('app', []);    app.controller('ctrlsizing', function($scope) {          $scope.$watch('rad', function(newval, oldval) {      if (newval === oldval) {        var s = snap("#svg");        $scope.circle = s.circle(150,150,0);      } else {        $scope.circle.animate({r: newval}, 500);      }    });  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>    <div ng-app='app'>      <div ng-controller="ctrlsizing">          <label id="rad">radius: <input ng-model="rad" type="number" placeholder="how 100?"></label>          <div id="circle">              <svg id="svg" style="height: 300; width: 300; position:absolute; left: 0px;top: 50px;"></svg>          </div>      </div>  </div>