title: Setting HTML element width using ng-style and percentage value in AngularJS
body: <p>I have a JSON response object which contains a percentage value. For example:</p>
  
  <pre><code>{
      completionPercent: 42
  }
  </code></pre>
  
  <p>The UI result I'm aiming for is:</p>
  
  <pre><code>┌──────────────────────────────────────────────────┐
  |█████████████████████                             |
  └──────────────────────────────────────────────────┘
  </code></pre>
  
  <p>The JSON object is used as the <code>ng-model</code> of an element in AngularJS. Now I want to bind the <code>completionPercent</code> as the width of an element in AngularJS. But CSS <code>width</code> expects a String like <code>'42%'</code>, not a Number. So the following <strong>does not work</strong>:</p>
  
  <pre><code>&lt;div id="progressBackground" ... &gt;
      &lt;div id="progressBar"
           ng-model="..."
           ng-style="{ 'width': completionPercent }"
           ... &gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Currently, I have this working by generating the entire style in the controller:</p>
  
  <pre><code>ng-style="getStyleFromCompletionPercent()"
  </code></pre>
  
  <p>But this is not a good idea, as it becomes very difficult to extend the <code>ng-style</code>. Is there another way to implicitly specify that the width is in percent? Something like this would be ideal:</p>
  
  <pre><code>ng-style="{ 'width-percentage': completionPercent }"
  </code></pre>