Color Sequence in D3 charts

Question

I am designing a dashboard for testing status from the data retreived using REST api's. For this, I have designed an angularjs app. I created a directive for chart, though it is working fine, but the sequence of colors is not consistent. I want the following sequence:

Unexecuted: Grey
Pass: Green
Fail: Red
Work in Progress: Orange
Blocked: Blue
N/A: Black

The issue is when I have only Pass and Blocked (both greater than 0 and rest as 0), the color for Blocked is displayed as RED (which is the color for Fail), i.e. it takes the next defined color.

Here is my code:

app.directive('chart', function($http) {

    return {
        restrict: 'EA',
        scope: {
            data: '=data',
            outerR: '=outerR',
            innerR: '=innerR',
            fontSize: '=fontSize',
            displayNumber: '=displayNumber',
            innerString: '=innerString',
            innerStringFontSize: '=innerStringFontSize',
        },

        link: function($scope, elements, attrs) {

            var data;

            if ($scope.data) {

                data = $scope.data;
            } else {
                data = [0, 0, 0, 0, 0, 0];
            }

            $scope.$watch('data', function() {
                console.log('render data');
                data = $scope.data;
                render();
            })


            function render() {
                var canvas = d3.select("#chartDiv").append("svg").attr("width", outerR * 2).attr("height", outerR * 2);
                var group = canvas.append("g").attr("transform", "translate(" + outerR + "," + outerR + ")");
                var arc = d3.svg.arc().innerRadius(innerR).outerRadius(outerR);
                var pie = d3.layout.pie();
                var arcs = group.selectAll(".arc").data(pie(data)).enter().append("g").attr("class", "arc");
                arcs.append("path").attr("d", arc).attr("fill", function(d) {
                    return color(d.data);
                });
                if ($scope.displayNumber != false) {

                    arcs.append("text").attr("transform", function(d) {
                        return "translate(" + arc.centroid(d) + ")";
                    }).
                    attr("text-anchor", "middle").attr("font-size", fontSize + "px").text(function(d) {
                        return d.data;
                    });

                }
            };


            var color = d3.scale.ordinal().range(["grey", "green", "red", "orange", "blue", "black"]);

            if ($scope.outerR) {
                var outerR = $scope.outerR;
            } else {
                var outerR = 100;
            }

            if ($scope.inner) {
                var innerR = $scope.innerR;
            } else {
                var innerR = 50;
            }

            if ($scope.fontSize) {
                var fontSize = $scope.fontSize;
            } else {
                var fontSize = 17 * outerR / 100;
            }

            if ($scope.innerStringFontSize) {
                var innerStringFontSize = $scope.innerStringFontSize;
            } else {
                var innerStringFontSize = innerR / 3;
            }
        }
    }
})

Please suggest if I am doing anything wrong, I couldn't fix this.