progress bar using ui-bootstrap 13.0

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<div ng-app="progressBar" ng-controller="progressBarCtrl">
    
    <p>{{text}}</p>
    
    <progressbar max="max" value="dynamic"><span style="color:black; white-space:nowrap;">{{dynamic}} / {{max}}</span></progressbar>
    
     <progress><bar ng-repeat="bar in stacked track by $index" value="bar.value" type="{{bar.type}}"><span ng-hide="bar.value < 5">{{bar.value}}%</span></bar></progress>
<button ng-click="random()">click
</button>
</button>
    
</div>

JavaScript

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

myApp.controller('progressBarCtrl',function($scope){
		$scope.random = function(){
 //    var value = Math.floor(Math.random() * 100 + 1);
      $scope.dynamic = 40;
    }
    $scope.text = "I am from controller";
    $scope.dynamic = 15;
    $scope.max = 30;
    $scope.stacked = [
        {
            type:"success",
            value:20
        },
        {
            type:"info",
            value:25
        },
        {
            type:"warning",
            value:25
        },
        {
            type:"danger",
            value:25
        }
    ];

})