title: AngularsJS How to pass strings to directive?
body: <p>I have been trying to pass string values to directive but it seems to only accepts integers or floats.</p>
  
  <p>This is the code:</p>
  
  <pre><code>app.directive('oodaBar', function(){
      return {
          restrict: 'EA',
          scope: {
              total: '=total',
              value: '=value',
              width: '=width',
              tcolor: '=tcolor',
              vcolor: '=vcolor'
          },
          templateUrl: 'partials/ooda-bar.html'
      };
  </code></pre>
  
  <p>ooda-bar.html:</p>
  
  <pre><code>&lt;svg width="{{width + 25}}" height="50"&gt;
  &lt;rect x="25" width="{{width}}" height="19" fill="#{{tcolor}}"&gt;&lt;/rect&gt;
  &lt;rect x="25" width="{{width * (value / total)}}" height="19" fill="#{{vcolor}}"&gt;&lt;/rect&gt;
  &lt;line x1="{{width + 25}}" y1="19" x2="{{width + 25}}" y2="38" stroke="#333" /&gt;
  &lt;line x1="{{width * (value / total) + 25}}" y1="19" x2="{{width * (value / total) + 25}}" y2="38" stroke="#333" /&gt;
  &lt;text x="{{width * (value / total) - 5 + 25}}" y="40" fill="#333" style="direction:rtl"&gt;{{value}}&lt;/text&gt;
  &lt;text x="{{width - 5 + 25}}" y="40" fill="#333" style="direction:rtl"&gt;{{total}}&lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>And I added this to display it:</p>
  
  <pre><code>&lt;ooda-bar width="500" total="100" value="60" tcolor="333" vcolor="ffc000"&gt;&lt;/ooda-bar&gt;
  </code></pre>
  
  <p>the problem is that I got this in browser:</p>
  
  <pre><code>&lt;svg width="525" height="50"&gt;
  &lt;rect x="25" width="500" height="19" fill="#333"&gt;&lt;/rect&gt;
  &lt;rect x="25" width="300" height="19" fill=""&gt;&lt;/rect&gt;
  &lt;line x1="525" y1="19" x2="525" y2="38" stroke="#333"&gt;&lt;/line&gt;
  &lt;line x1="325" y1="19" x2="325" y2="38" stroke="#333"&gt;&lt;/line&gt;
  &lt;text x="320" y="40" fill="#333" style="direction:rtl"&gt;60&lt;/text&gt;
  &lt;text x="520" y="40" fill="#333" style="direction:rtl"&gt;100&lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>As you can see the second rect has no value in "fill".</p>
  
  <p><strong>How can I pass the string value that contains color code ?</strong></p>