Untitled

<!DOCTYPE html>
<html>

  <head>
    <title>SkillWidget Example</title>
    <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="skillWidgetExample">
    <h1>Skill Widget Example</h1>
    <skill-widget
      text="AngularJS" percent="10"/>
    
  </body>

</html>

(function(angular) {
  'use strict';
  angular
    .module('skillWidgetExample', [])
    .directive("skillWidget", function(){
      
      var linkFunction = function(scope, element, attributes){
        //console.log(attributes);
        scope.text = attributes["text"]; 
        scope.percent = attributes["percent"];
  
        scope.deg = function(){ 
          return 360 * parseInt(scope.percent) /100;
        }
      }; 
  
      return {
        restrict: "E",
        templateUrl:"skillTemplate.html",
        link: linkFunction,
        scope: {
          text: "@text",
          percent : '@'
        }
      }
    });
})(window.angular);

/* Styles go here */
.ppc-progress-fill {
  	width: 100px;
  	height: 100px;
  	background: url('https://angularjs.org/img/AngularJS-large.png') 0 0;
  	-moz-border-radius: 70px;
  	-webkit-border-radius: 70px;
  	border-radius: 70px;
}

<div class="progress-pie-chart"><!--Pie Chart -->
  <div class="ppc-progress">
      <div class="ppc-progress-fill" 
        style="
        	transform: rotate({{deg()}}deg);
        	-webkit-transform: rotate({{deg()}}deg);
        	-ms-transform: rotate({{deg()}}deg)"></div>
  </div>
  <div class="ppc-percents">
  <div class="pcc-percents-wrapper">                 
      <span>{{text}}</span>
      <br/>Percent: 
      <input ng-model="percent">
      <br/><span>{{deg()}}</span>
  </div>
</div>