title: How to Change Color of Progress Bar Angular Directive
body: <p>I want to integrate angular progress directive in my application.</p>
  
  <p>I found progress bar directive that solve the purpose but I'm not able to change the color of progress bar. I want to give custom color for progress bar.</p>
  
  <p>Does anyone have any idea on this ?</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="ui.bootstrap.demo"&gt;
    &lt;head&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"&gt;&lt;/script&gt;
      &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"&gt;&lt;/script&gt;
      &lt;script src="example.js"&gt;&lt;/script&gt;
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;div ng-controller="ProgressDemoCtrl"&gt;
  
      &lt;h3&gt;Static&lt;/h3&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-4"&gt;&lt;progressbar value="55"&gt;&lt;/progressbar&gt;&lt;/div&gt;
          &lt;div class="col-sm-4"&gt;&lt;progressbar class="progress-striped" value="22" type="warning"&gt;22%&lt;/progressbar&gt;&lt;/div&gt;
          &lt;div class="col-sm-4"&gt;&lt;progressbar class="progress-striped active" max="200" value="166" type="danger"&gt;&lt;i&gt;166 / 200&lt;/i&gt;&lt;/progressbar&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;hr /&gt;
      &lt;h3&gt;Dynamic &lt;button class="btn btn-sm btn-primary" type="button" ng-click="random()"&gt;Randomize&lt;/button&gt;&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;small&gt;&lt;em&gt;No animation&lt;/em&gt;&lt;/small&gt;
      &lt;progressbar animate="false" value="dynamic" type="success"&gt;&lt;b&gt;{{dynamic}}%&lt;/b&gt;&lt;/progressbar&gt;
  
      &lt;small&gt;&lt;em&gt;Object (changes type based on value)&lt;/em&gt;&lt;/small&gt;
      &lt;progressbar class="progress-striped active" value="dynamic" type="{{type}}"&gt;{{type}} &lt;i ng-show="showWarning"&gt;!!! Watch out !!!&lt;/i&gt;&lt;/progressbar&gt;
  
      &lt;hr /&gt;
      &lt;h3&gt;Stacked &lt;button class="btn btn-sm btn-primary" type="button" ng-click="randomStacked()"&gt;Randomize&lt;/button&gt;&lt;/h3&gt;
      &lt;progress&gt;&lt;bar ng-repeat="bar in stacked track by $index" value="bar.value" type="{{bar.type}}"&gt;&lt;span ng-hide="bar.value &lt; 5"&gt;{{bar.value}}%&lt;/span&gt;&lt;/bar&gt;&lt;/progress&gt;
  
  &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Plunker Link: <a href="http://plnkr.co/edit/3AIJPQzQgosmlXV3QQ9D?p=preview" rel="noreferrer">http://plnkr.co/edit/3AIJPQzQgosmlXV3QQ9D?p=preview</a></p>