Untitled

html
----
<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" type="text/css" />
        <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.4/d3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
    </head>
    <body>
        <div ng-app="app" ng-controller="mainCtrl">
            <div id="radialProgress1" data-percentage="30" data-track-width="5"
                data-track-colour="656975" data-fill-colour="#5AAAFA"
                data-text-colour="#959595" data-stroke-colour="#C7D2D2"
                data-stroke-spacing="4">
            </div>
            <div id="radialProgress2" data-percentage="30" data-track-width="5"
                data-track-colour="656975" data-fill-colour="#5AAAFA"
                data-text-colour="#959595" data-stroke-colour="#C7D2D2"
                data-stroke-spacing="4">
            </div>
            <div id="radialProgress3" data-percentage="30" data-track-width="5"
                data-track-colour="656975" data-fill-colour="#5AAAFA"
                data-text-colour="#959595" data-stroke-colour="#C7D2D2"
                data-stroke-spacing="4">
            </div>
        </div>

        javascript script
        -------------------
        <script>debugger;
            var app = angular.module("app", []);
                app.controller("mainCtrl", function($scope, $rootScope){
                    alert("calling");
                    $scope.showRadialProgressBar();
                            $scope.showRadialProgressBar = function(){debugger;
                                var progressRadial = [document.getElementById('radialProgress1'), document.getElementById('radialProgress2'), document.getElementById('radialProgress3')];

                                    for(i=0; i<progressRadial.length; i++) {
                                        var wrapper = progressRadial[i];
                                        var start = 0;
                                        var end = parseFloat(wrapper.dataset.percentage);

                                        var colours = {
                                          fill: '#' + wrapper.dataset.fillColour,
                                          track: '#' + wrapper.dataset.trackColour,
                                          text: '#' + wrapper.dataset.textColour,
                                          stroke: '#' + wrapper.dataset.strokeColour,
                                        }

                                        var radius = 75;
                                        var border = wrapper.dataset.trackWidth;
                                        var strokeSpacing = wrapper.dataset.strokeSpacing;
                                        var endAngle = Math.PI * 2;
                                        var formatText = d3.format('.0%');
                                        var boxSize = radius * 2;
                                        var count = end;
                                        var radialprogress = start;
                                        var step = end < start ? -0.01 : 0.01;

                                        //Define the circle
                                        var circle = d3.svg.arc()
                                          .startAngle(0)
                                          .innerRadius(radius)
                                          .outerRadius(radius - border);

                                        //setup SVG wrapper
                                        var svg = d3.select(wrapper)
                                          .append('svg')
                                          .attr('width', boxSize)
                                          .attr('height', boxSize);

                                        // ADD Group container
                                        var g = svg.append('g')
                                          .attr('transform', 'translate(' + boxSize / 2 + ',' + boxSize / 2 + ')');

                                        //Setup track
                                        var track = g.append('g').attr('class', 'radial-progress');
                                        track.append('path')
                                          .attr('class', 'radial-progress__background')
                                          .attr('fill', colours.track)
                                          .attr('stroke', colours.stroke)
                                          .attr('stroke-width', strokeSpacing + 'px')
                                          .attr('d', circle.endAngle(endAngle));

                                        //Add colour fill
                                        var value = track.append('path')
                                          .attr('class', 'radial-progress__value')
                                          .attr('fill', colours.fill)
                                          .attr('stroke', colours.stroke)
                                          .attr('stroke-width', strokeSpacing + 'px');

                                        //Add text value
                                        var numberText = track.append('text')
                                          .attr('class', 'radial-progress__text')
                                          .attr('fill', colours.text)
                                          .attr('text-anchor', 'middle')
                                          .attr('font-size', 40)
                                          .attr('dy', '.5rem');


                                        function update(progress) {
                                          //update position of endAngle
                                          value.attr('d', circle.endAngle(endAngle * radialprogress));
                                          //update text value
                                          numberText.text(formatText(radialprogress));
                                        }

                                        (function iterate() {
                                          //call update to begin animation
                                          update(radialprogress);
                                          if (count > 0) {
                                            //reduce count till it reaches 0
                                            count--;
                                            //increase progress
                                            radialprogress += step;
                                            //Control the speed of the fill
                                            setTimeout(iterate, 10);
                                          }
                                        })();
                                    }
                                }
                                //radial code end
                });
        </script>
    </body>
</html>