Angular UI Bootstrap progress bar - how to calculate “value” attribute with expression?

Question

I want to use UI bootstrap progressbar inside a table to give a visual representation of some statistics. The stats are percentages so it should work quite nicely, ie the higher the percentage the longer the bar.

I need to calculate the value with an expression, so I'm creating the progressbar element like so inside the table column:

<uib-progressbar type="info" value="{{ ((statValue / total) * 100) }}"></uib-progressbar>

Just to clarify, that's a simplified example, but the point is I cannot get any kind of expression to work when trying to calculate the value attribute.

It works if I give the attribute a different name and it works if I create a "value" attribute on any other type of element (eg a div). It just does not seem to work for the value attribute on the uib-progressbar element, which is exactly where I need it!

The error I get in the browser console is:

"Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{ ((statValue / total) * 100) }}] starting at [{ ((statValue / total) * 100) }}]."

I'm using angularjs 1.4.9 and angular-ui-bootstrap 1.1.2.

How do I get this to work?

Answer 1

value attribute should not be using interpolation {{}} inside value attribute, you could directly get scope variable values in it, like other directive of angular does ng-click , ng-if , etc.

<uib-progressbar type="info" value="((statValue / total) * 100)"></uib-progressbar>

Sample Here