Setting HTML element width using ng-style and percentage value in AngularJS
The code within your ng-style attribute is a javascript object, so you could append a percentage symbol on the end of you width value. As you are appending a string to a number it will also convert the value of width to a string.
<div id="progressBackground" ... > <div id="progressBar" ng-model="..." ng-style="{ 'width': completionPercent + '%' }" ... ></div></div>
Another way to achieve this is
[style.width.%]="completionPercent"In your code
<div id="progressBackground" ... ><div id="progressBar" ng-model="..." [style.width.%]="completionPercent" ... ></div>
For the benefit of searchers, if you needed to fill the area, but leave a bit of space at the end (for example, to provide textual detail), this could be achieved with something similar to the following code:
<div ng-style="{'width': 'calc('+completionPercent+'% - 250px)'}"> </div>Obviously, this would only work with CSS3 compliant browsers, but it scales well dynamically.