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>

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)'}">&nbsp;</div>

Obviously, this would only work with CSS3 compliant browsers, but it scales well dynamically.


Another way to achieve this is

[style.width.%]="completionPercent"

In your code

<div id="progressBackground" ... >
<div id="progressBar"
     ng-model="..."
     [style.width.%]="completionPercent"
     ... ></div>