Progressbar

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div ng-app>
  <div>
    <label>Name:</label>
    <input type="text" ng-model="progress">
    <hr>
    <h1>Pogress value {{progress}}%</h1>    
    
    <div class="progbarwrapper">
           <div class="progbar" style="width:{{progress}}%"></div>
     </div>            
  </div>
</div>

CSS

.progbarwrapper {
    background: #EEE;    
    width:400px;    
}

.progbar{
    width:0%;            
    background: #409F11;
    height:20px;
    -moz-transition: width .5s;
    -webkit-transition: width .5s;
    -ms-transition: width .5s;
    -o-transition: width .5s;
    transition: width .5s;
}

CoffeeScript

app = angular.module 'app', []

angular.bootstrap document, ['app']