title: How to design a dynamic progress bar with stages and scalable input with angularjs?
body: <p>I am trying to develop a progressive bar for fund raising activities. The minimum value is the value for the activity to take place and the maximum value is the max fund it can take. It will be the best if the color of progressive bar to be red before it reaches minimum marker and it turns into green afterwards.</p>
  
  <p>This is what I have in mind for progress bar 
  <a href="http://www.icondeposit.com/local--files/imageid:268/UI-Progress-Bars.jpg" rel="nofollow">http://www.icondeposit.com/local--files/imageid:268/UI-Progress-Bars.jpg</a></p>
  
  <p>This is what I have achieved so far 
  <a href="https://www.dropbox.com/s/q4nn64bdu8cuzch/progress%20bar.tiff" rel="nofollow">https://www.dropbox.com/s/q4nn64bdu8cuzch/progress%20bar.tiff</a></p>
  
  <p>Here is the code of my html</p>
  
  <pre><code>&lt;div ng-controller="ProgressDemoCtrl"&gt;
      &lt;h3&gt;Dynamic &lt;/h3&gt;
      &lt;progressbar max="max" value="dynamic"&gt;&lt;span style="color:black; white-space:nowrap;"&gt;{{dynamic}} / \
  {{max}}&lt;/span&gt;&lt;/progressbar&gt;
  &lt;!--scalable input --&gt;
  &lt;div class="col-lg-6"&gt;
      &lt;div class="input-group"&gt;
        &lt;input type="text" class="form-control" id="crd_volume"&gt;
        &lt;span class="input-group-btn"&gt;
          &lt;button class="btn btn-default" type="button" ng-click="update()"&gt;Confirm the volume&lt;/button&gt;
        &lt;/span&gt;
      &lt;/div&gt;&lt;!-- /input-group --&gt;
    &lt;/div&gt;&lt;!-- /.col-lg-6 --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is my code for controller:</p>
  
  <pre><code>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))&lt;max_volume)||((value+parseFloat(volume))==max_volume))
        {
            value =parseFloat(value)+parseFloat(volume);
         }
      $scope.dynamic = value;
      $scope.type = type;
    }
  </code></pre>
  
  <p>Lastly, I tried my code in plunker. But it does not work there, even though I added a ng-app and ng-controller. </p>
  
  <p>Really appreciate any help. Thanks!</p>