I am building a progress indicator with a circle. Where the circle is built with angular directive, and the progress level is passed as an argument to the directive where values are extracted with angular repeat. 

[![enter image description here](https://i.stack.imgur.com/VlNfN.png)](https://i.stack.imgur.com/VlNfN.png)

the problem is that all the progress levels are getting the same value despite passing different values. 

To set the update the progress level, I first tried to use jquery .css function as follows, which gave the same value for all the progress levels

```
$(this).find('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');

```

Then I tried to embed the progress with ng-style into the template which also did not work, given the same progress level to all. 

```
<div class="ppc-progress-fill" ng-style="{'transform': 'rotate('+deg+'deg)', '-webkit-transform': 'rotate('+deg+'deg)', '-ms-transform': 'rotate('+deg+'deg)'}"></div>

```

Here is the relevant portion of the code 

```
AppModule.directive("skillWidget", function(){
    var linkFunction = function(scope, element, attributes){
      //console.log(attributes);
       scope.text = attributes["text"]; 
       scope.percent = attributes["percent"];

       percent = parseInt(scope.percent),
         deg = 360*percent/100;

         //console.log($(this).find('.ppc-progress-fill'));

        $(this).find('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');

        //$('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');

    }; 

    return {
      restrict: "E",
      templateUrl:"views/skillTemplate.html",
      link: linkFunction,
      scope: {
        text: "@text",
        percent : "@percent"
      }
    }
});

```

Here is the template: 

```
<div class="progress-pie-chart"><!--Pie Chart -->
                    <div class="ppc-progress">
                        <div class="ppc-progress-fill" ng-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>
                    </div>
</div>

```

What am I missing? 

Further infos: 
The circular progress bar is based on this example <http://codepen.io/shankarcabus/pen/GzAfb>.