title: Change bootstrap progress-bar width from angularjs
body: <p>I'm new in Angularjs and I am trying to update the width of a progress bar when a value in my controller change.</p>
  
  <p>I have something like:</p>
  
  <pre><code>&lt;span id="percentage"&gt;$ {{getTotal()}} ({{getPercentage()}}%)&lt;/span&gt;
  &lt;div class="progress-bar progress-bar-warning" 
    role="progressbar" aria-valuenow="10" aria-valuemin="0" 
    aria-valuemax="100" style="width: 10%"&gt;
      &lt;span class="sr-only"&gt;10% Complete (warning)&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I have in my controller something like:</p>
  
  <pre><code>$scope.total = 254.78;
  $scope.threshold = 15000;
  
  $scope.getPercentage = function () {
      return (($scope.total * 100) / $scope.threshold).toFixed(2);
  }
  $scope.getTotal = function () {
      return $scope.total;
  }
  </code></pre>
  
  <p>How do I update the width value of the progress bar?</p>
  
  <p>Thanks,
  Alberto.</p>