title: embedded stylesheet with angular-defined values
body: <p>I am repurposing the HTML/CSS for this survey widget.</p>
  
  <p>The CSS is built for a fixed number (5) of options (radio buttons), but I can dynamicize it using <code>ng-repeat</code> so that it can hold anywhere from 3 to 9 options, as the data requires.</p>
  
  <p>The CSS needs to be dynamic as well to account for a variable number of options.</p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;div class="widget-wrapper likert-scale-widget" action=""&gt;
          &lt;ul class='likert1'&gt;
              &lt;li ng-repeat="option in item.response.options&gt;
                  &lt;input type="radio" name="likert" ng-value="option.value"&gt;
                  &lt;label&gt;{{option.label}}&lt;/label&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS makes extensive use of pseudo-classes:</p>
  
  <pre><code>div.likert-scale-widget .likert1:before {
      top: 11px;
      left: 9.5%;
      display: block;
      width: 78%;
  }
  </code></pre>
  
  <p>You can't put pseudo-classes directly inline, so I can't do this:</p>
  
  <pre><code>&lt;div class="likert-scale-widget"&gt;
  &lt;div class="likert1" style="width:78%"&gt;
  </code></pre>
  
  <p>So what I have to do is embed my styles in a  element at the top of the page. Then I can target it with <code>Angular</code>:</p>
  
  <pre><code>&lt;style&gt;
  div.likert-scale-widget .likert1:before {
      top: 11px;
      left: {{ 12 - item.response.options.length*1.1 }}%;
      display: block;
      width: {{ 74 + item.response.options.length }}%;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Problem is, this is very non-standard markup. My GUI hates the multiple use of parentheses.</p>
  
  <p>Is there a better way of doing this?</p>