<!DOCTYPE html>
<html ng-app='myapp'>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller='MyCtrl'>
<h1>Progress Bar Bug</h1>
<span>When max and value changed dynamically progess bar exceed out of widht of page.</span>
<progressbar max="max" value="dynamic"><span style="color:black; white-space:nowrap;">{{dynamic}} / {{max}}</span></progressbar>
Change Value <select ng-model='dynamic' ng-change='change()'>
<option value='60' selected>1 Minute</option>
<option value='120' selected>2 Minute</option>
<option value='300' selected>5 Minute</option>
</select>
</body>
</html>
angular.module('myapp',['ui.bootstrap']).controller('MyCtrl',function($scope){
$scope.name ="vinay kumar";
$scope.dynamic=60;
$scope.max=60;
$scope.change= function(){
$scope.max = $scope.dynamic;
}
})
/* Styles go here */