javascript - Angular extending ui.bootstrap.progressbar to support some text on the progressbar -

i'm using ui.bootstrap.progressbar (code here: https://github.com/angular-ui/bootstrap/blob/master/src/progressbar/progressbar.js) , i'm trying extend support custom html (or text) on progess bar. looks in vanilla bootstrap:

   <div class="progress">       <div class="bar" style="width: 60%;">this thing @ 60%</div>     </div> 

http://plnkr.co/edit/wurplka0y6ck7hyt3gl1?p=preview

i'm new @ directives, tried:

in progressbarcontroller added label variable

var label = angular.isdefined($attrs.label) ? $scope.$eval($attrs.label) : '';

also modified object controller returns include label. added bar.label in directive's template so:

<div class="progress">     <progressbar ng-repeat="bar in bars"                   width="bar.to" old="bar.from"                   animate="bar.animate" type="bar.type">     </progressbar>     {{bar.label}}  </div> 

the progressbar appears fine, cannot see value of label.

what doing wrong? in advance.

edit: modified module here: http://paste.ofcode.org/xalxj8pwxzqnqyw4zmtn3g

this turned out pretty straightforward.

all had was:

• modify progress directive , add transclude: true
• modify progress.html include ng-transclude directive, so

:

<div class="progress">     <span ng-transclude></span>     <progressbar ng-repeat="bar in bars" width="bar.to" old="bar.from" animate="bar.animate" type="bar.type"></progressbar> </div> 

after this, text put between <progressbar></progressbar> render on progressbar, css modifications needed make text appear in correct position.

but every progressbar , every text needs additional positioning, part still not complete solution. setting wrapper's position relative , <span>'s absolute 1 step still not enough.