Wie erstellt man eine dynamische Statusanzeige mit Stufen und ersteigbare input mit angularjs?

Ich versuche mich zu entwickeln, einen progressiven bar für Fundraising-Aktivitäten. Der minimale Wert ist der Wert für die Aktivität stattfinden soll und der maximale Wert ist der max-Fonds übernehmen kann. Es wird das beste sein, wenn sich die Farbe der Fortschrittsanzeige rot werden, bevor es erreicht die minimum-Markierung und es verwandelt sich in grün danach.

Dies ist, was ich im Sinn habe für die Fortschritt-bar
http://www.icondeposit.com/local--files/imageid:268/UI-Progress-Bars.jpg

Dies ist, was ich bislang erreicht haben
https://www.dropbox.com/s/q4nn64bdu8cuzch/progress%20bar.tiff

Hier ist der code aus meiner html -

<div ng-controller="ProgressDemoCtrl">
    <h3>Dynamic </h3>
    <progressbar max="max" value="dynamic"><span style="color:black; white-space:nowrap;">{{dynamic}} / \
{{max}}</span></progressbar>
<!--scalable input -->
<div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" id="crd_volume">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" ng-click="update()">Confirm the volume</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div>

Und hier ist mein code für controller:

var ProgressDemoCtrl = function ($scope) {

  $scope.max = 200;
  $scope.min = 100;
  var value=0;
  var max_volume=$scope.max
  var volume=1;

  $scope.update=function(){
  volume=document.getElementById("crd_volume").value;
  alert(volume);

  if (((value+parseFloat(volume))<max_volume)||((value+parseFloat(volume))==max_volume))
      {
          value =parseFloat(value)+parseFloat(volume);
       }
    $scope.dynamic = value;
    $scope.type = type;
  }

Schließlich habe ich versucht meinen code in plunker. Aber es funktioniert nicht hier, obwohl ich habe ein ng-app und ng-controller.

Wirklich zu schätzen jede Hilfe. Danke!