Angular: Empty Fiddle

http://angularjs.org/

by pritojs

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-controller="MyCtrl">
  <div class="col-sm-4" ng-repeat="dat in data">
    Standard : {{dat.standard}}
    <uib-progressbar class="progress-striped active" max="dat.max_students" value="dat.available_students" type="success"><i>{{dat.available_students}} / {{dat.max_students}}</i></uib-progressbar>
  </div>

</div>

JavaScript

var myApp = angular.module('myApp', ['ui.bootstrap']);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
  $scope.data = [{
    "standard": "Ist",
    "max_students": 20,
    "available_students": 8
  }, {
    "standard": "IInd",
    "max_students": 15,
    "available_students": 10
  }, {
    "standard": "IIIrd",
    "max_students": 50,
    "available_students": 22
  }];

}

myApp.controller('MyCtrl', ['$scope', MyCtrl]);