title: angular.js - wrapping the currency symbol and decimal numbers in spans
body: <p>Can you possibly do something like this in angular?</p>
  
  <p><img src="https://i.stack.imgur.com/Pc4Jl.png" alt="enter image description here"></p>
  
  <p>It's not quite possible to do this, as doesn't parse tags or something</p>
  
  <p><code>{{ 10000 | currency:"&lt;span&gt;$&lt;/span&gt;" }}</code></p>
  
  <p><a href="http://plnkr.co/edit/WluYoe2Ltmhmhvr8BBWX?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/WluYoe2Ltmhmhvr8BBWX?p=preview</a></p>
  
  <p>let alone somehow separate decimal number..</p>
  
  <p>The ideal result would be </p>
  
  <p><code>1 000 000&lt;span class="dec"&gt;,00&lt;/span&gt;&lt;span class="cur"&gt;€&lt;/span&gt;</code></p>
  
  <p>It's not really possible to do with any filter settings is it..?</p>
  
  <p>I could try and modify angular's currency filter and the <code>formatNumber</code> function, but it still would take it as a text rather than a span element.</p>
  
  <p>// edit
  you can actually do this <a href="http://plnkr.co/edit/dcEhHi8sp43564ZvC4D1?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/dcEhHi8sp43564ZvC4D1?p=preview</a></p>
  
  <p><code>&lt;p ng-bind-html-unsafe="10000 | currency:'&lt;span&gt;$&lt;/span&gt;'"&gt;&lt;/p&gt;</code></p>
  
  <p>still clueless about decimals though</p>