title: progress bar error in angular bootstrap application
body: <p>I have the following angular app:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="StudentProgram"&gt;
      &lt;head&gt;
          &lt;title&gt;Student Program Management&lt;/title&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"&gt;&lt;/script&gt;
          &lt;script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"&gt;&lt;/script&gt;
          &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
          &lt;link type="text/css" rel="stylesheet" href="css/badge.css"/&gt;
          &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
      &lt;div class="container"&gt;
      &lt;div class="row"&gt;
  
          &lt;div class="panel col-lg-3 col-md-3 col-sm-2"&gt;
              &lt;div ng-controller="mylistcontroller" class="" id="menu"&gt;               
                  &lt;br/&gt;
                  &lt;h4&gt;&lt;font color=#636363&gt;My Academic Programs&lt;/font&gt;&lt;button id="tooltip1" type="button" class="btn btn-default pull-right" data-toggle="tooltip" data-placement="right" data-original-title="Add a Program"&gt;&lt;span class="glyphicon glyphicon-plus-sign pull-right"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/h4&gt;
  
                  &lt;div ng-repeat="prog in programs" class="list-group"&gt;
  
                      &lt;a ng-repeat="list in prog.programstaken" href="#" class="list-group-item"&gt;
  
                                  {{list.program}}&lt;span class="badge badge-info pull-right"&gt;{{list.completed}} / {{list.required}}&lt;/span&gt;
                                  &lt;div class="progress progress-striped"&gt;
                                      &lt;div class="progress-bar" ng-class="{'progress-bar-danger': getPercentage()&lt;40, 'progress-bar-info': getPercentage()&gt;=40 &amp;&amp; getPercentage()&lt;70, 'progress-bar-success': getPercentage()&gt;=70}" role="progressbar" aria-valuenow="{{getPercentage()}}" aria-valuemin="0" aria-valuemax="100" style="{width:(getPercentage()+'%')}"&gt;
                                          {{getPercentage()}}% 
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                      &lt;/a&gt;
  
  
  
                      &lt;!-- &lt;a href="#" class="list-group-item"&gt;
  
                                  AA.ARTS&lt;span class="badge badge-info pull-right"&gt;29 / 60&lt;/span&gt;
                                  &lt;div class="progress progress-striped"&gt;
                                      &lt;div class="progress-bar" role="progressbar" aria-valuenow="48.3" aria-valuemin="0" aria-valuemax="100" style="width: 48.3%;"&gt;
                                          48.3% 
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                      &lt;/a&gt; --&gt;    
  
  
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;br/&gt;&lt;br/&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;  
      &lt;script id="tooltipid" type="text/javascript"&gt;
          $(document).ready(function() {
              $('#tooltip1').tooltip();
          });
      &lt;/script&gt;
      &lt;script src="js/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  
          var app = angular.module('StudentProgram', ['ui.bootstrap']);
  
          app.controller('mylistcontroller', function($scope, $modal, $log){
              $scope.programs=[{programlist:[
                  {program:"AS.SCIENCE", completed:"32", required:"60"},
                  {program:"AA.ARTS", completed:"29", required:"60"},
                  {program:"AAS.BUSI.ADMIN", completed:"0", required:"60"},
                  {program:"AAS.MANAGEMENT", completed:"0", required:"60"},
                  {program:"AS.FS.BUSINESS", completed:"0", required:"60"},
                  {program:"AAS.NURSING", completed:"0", required:"60"}],
                  programstaken:[
                  {program:"AS.SCIENCE", completed:"32", required:"60"},
                  {program:"AA.ARTS", completed:"29", required:"60"}]}
              ];
  
              $scope.getPercentage = function () {
                  return (($scope.programstaken.completed)/($scope.programstaken.required)*100).toFixed(2);
              }
  
          });     
  
      &lt;/script&gt;
  
  
  
      &lt;br/&gt;
  
  
      &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The progress bar is not getting the value for the getPercentage() function. Where is my error?</p>