How to change progress bar color depending on the value?

Question

I am making a progress bar using angular and bootstrap.It works fine for now, it shows progress value correctly. Now I want my progress bar use types=" " depending on the value of my property called progress. I tried implementing code from UI Bootstrap and some other stack overflow examples but I am missing something.

Can anyone help? Thanks for your time.

script.js

table.controller('workingPlan', function ($scope, $localStorage) {
    $scope.$storage = $localStorage.$default({
        "todos":[
            { "text":"starting work",  "progress":10},
            { "text":"middle of work","progress":50},
            { "text":"lunch brake", "progress":70},
            { "text":"finished working", "progress":100}
        ]   
    });

      $scope.changeType = function(todo) {
        var type;
        if (todo.progress < 30) {
          type = 'success';
        } else if (todo.progress < 60) {
          type = 'info';
        } else if (todo.progress < 90) {
          type = 'warning';
        } else {
          type = 'danger';
        }

        $scope.type = type;
      };

index.html

<tr ng-repeat="todo in plan>     
    <td><progressbar animate="false" value="todo.progress" type="{{todo.type}}"><b>{{todo.progress}}% </b></progressbar></t
</tr>

Answer 1

use ng-class //Edit missing " after "todo in plan >

  <tr ng-repeat="todo in plan">     
     <td><progressbar animate="false" value="todo.progress" type="{{todo.type}}" 
     ng-class="{ 'progress-bar-success' : todo.type == 'succes' , 'progress-bar-info': todo.type == 'info', 'progress-bar-warning' : todo.type == 'warning' , 'progress-bar-danger': todo.type == 'danger'}"   >  
     <b>{{todo.progress}}% </b></progressbar></t
 </tr>

Answer 2

You also can use the Progress value to determine the hue

ng-style="{'color':'hsl('+1.2*todo.progress+',100%,50%)'}"

this code will use 0%-100% to display the colors hsl(0,100%,50%) (red) to hsl(120,100%,50%) (green). Going over 100% will cause it to turn blue.

plunker