如何基于分类构建进度条？

Question

我有3个类别，每个类别每个都有3个问题。如果用户启动了类别1并完成了它，我需要在进度条中显示33.33％的进度状态。然后当类别2完成时显示66.66％进度条状态，最后当用户完成类别-3时，进度将为99.99％。

html
-----

<div ng-app="app" ng-controller="main">
    <div progressbar="category"></div>
     <div ng-hide="category1">
       <p><span  style="color:red">category1</span><br/>
           <span>question1</span>
           <input type = "radio" name="grp1" value="yes" ng-model="user.q1" />
           <input type = "radio" name="grp1" value="no" ng-model="user.q1" />
       </p><p>
           <span>question2</span>
           <input type = "radio" name="grp2" value="yes" ng-model="user.q2" />
           <input type = "radio" name="grp2" value="no" ng-model="user.q2" />
       </p><p>
           <span>question3</span>
           <input type = "radio" name="grp3" value="yes" ng-model="user.q3" />
           <input type = "radio" name="grp3" value="no" ng-model="user.q3" />
       </p>
       <button ng-click="catg1()">1 Next</button>
      </div><!-- category1 closed-->
     <div ng-show="category2">
       <p><span style="color:red">category2</span><br/>
           <span>question4</span>
           <input type = "radio" name="grp4" value="yes" ng-model="user.q4" />
           <input type = "radio" name="grp4" value="no" ng-model="user.q4" />
       </p><p>
           <span>question5</span>
           <input type = "radio" name="grp5" value="yes" ng-model="user.q5" />
           <input type = "radio" name="grp5" value="no" ng-model="user.q5" />
       </p><p>
           <span>question6</span>
           <input type = "radio" name="grp6" value="yes" ng-model="user.q6" />
           <input type = "radio" name="grp6" value="no" ng-model="user.q6" />
       </p>
       <button ng-click="catg2()">2 Next</button>
     </div><!-- category2 closed-->
     <div ng-show="category3">
       <p><span style="color:red">category3</span><br/>
           <span>question7</span>
           <input type = "radio" name="grp7" value="yes" ng-model="user.q7" />
           <input type = "radio" name="grp7" value="no" ng-model="user.q7" />
       </p><p>
           <span>question8</span>
           <input type = "radio" name="grp8" value="yes" ng-model="user.q8" />
           <input type = "radio" name="grp8" value="no" ng-model="user.q8" />
       </p><p>
           <span>question9</span>
           <input type = "radio" name="grp6" value="yes" ng-model="user.q9" />
           <input type = "radio" name="grp6" value="no" ng-model="user.q9" />
       </p>
       <button ng-click="catg3()">3 Next</button>
     </div><!-- category3 closed-->
</div>

script
------
angular.module("app", [])
.controller("main", ['$scope', function($scope) {
    $scope.category1 = false;
  $scope.category2 = false;
  $scope.category3 = false;
    $scope.catg1 = function(){
  $scope.category1 = true;
  $scope.category2 = true;
  $scope.category3 = false;
  }
  $scope.catg2 = function(){
        $scope.category1 = true;
  $scope.category2 = false;
  $scope.category3 = true;
  }
  $scope.catg3 = function(){
        $scope.category1 = true;
  $scope.category2 = false;
  $scope.category3 = false;
  }
    $scope.items = [0, 33.33, 66.66, 99.99, 0]
}])
.directive('progressbar', [function() {
    return {
        restrict: 'A',
        scope: {
            'progress': '=progressbar'
        },
        controller: function($scope, $element, $attrs) {
            $element.progressbar({
                value: $scope.progress
            })

            $scope.$watch(function() {
                $element.progressbar({value: $scope.progress})
            })
        }
    }
}])

jsfiddle：http://jsfiddle.net/A2CV5/629/