JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.0.2/angular.min.js"></script>
<div ng-app="miniapp">

  <div ng-controller="Ctrl">
      <h1>{{test}}</h1>
      <p>Infrared: {{phone.connectivity.infrared | iconify}} I see html but I expect icon here</p>
  </div>

</div>

JavaScript

var $scope;
var app = angular.module('miniapp', ['phonecatFilters']);

function Ctrl($scope) {
    $scope.test = 'Example from: ';
    $scope.phone = {
        connectivity: {
            infrared: true
        }
    };
}
angular.module('phonecatFilters', []).filter('checkmark', function() {
  return function(input) {
    return input ? '\u2713' : '\u2718';
  };
}).filter('iconify', function () { // My custom filter
        return function (input) {
            return input ? '<i class="icon-ok"></i>' : '<i class="icon-remove"></i>';
        }
    }).filter('icon', function () { // My second custom filter
        return function (input) {
            return input ? 'ok' : 'remove';
        }
    });