title: How to create angularjs filter which outputs HTML
body: <p>After reading <a href="http://docs.angularjs.org/tutorial/step_09" rel="noreferrer">AngularJS tutorial step-9</a>
  I have created my own AngularJS filter, which should convert boolean data into html.</p>
  
  <p>Here is my filter code:</p>
  
  <pre><code>angular.module('phonecatFilters', []).filter('iconify', function () { // My custom filter
      return function (input) {
          return input ? '&lt;i class="icon-ok"&gt;&lt;/i&gt;' : '&lt;i class="icon-remove"&gt;&lt;/i&gt;';
      }
  });
  </code></pre>
  
  <p>Here is my HTML code:</p>
  
  <pre><code>&lt;dt&gt;Infrared&lt;/dt&gt;
    &lt;dd&gt;{{phone.connectivity.infrared | iconify }}"&gt;&lt;/dd&gt;
  </code></pre>
  
  <p>The problem is that borwser displays returned value literally as:</p>
  
  <pre><code>&lt;i class="icon-ok"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>not as icons (or rendered html) that should appear.</p>
  
  <p><a href="http://jsfiddle.net/942RA/3/" rel="noreferrer">Here is JSFiddle example</a></p>
  
  <p>I think that some sanitisation occurs during this process.</p>
  
  <p>Is it possible to turn this sanitization off for this specific filter?</p>
  
  <p>Also I know how to display icons by not returning HTML output from filter but rather just 'ok' or 'remove' text which I can then substitute to:</p>
  
  <pre><code>&lt;i class="icon-{{phone.connectivity.infrared | iconify}}"&gt;&lt;i&gt;
  </code></pre>
  
  <p>but this is not what I want.</p>