JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-sanitize.js"></script>
<div ng-app="test">
  
  <div ng-controller="URL">
      <form ng-submit="addTodo()">
          <input type="text" ng-model="save"  size="30"
          placeholder="enter a url"/>
          <input class="btn-primary" type="submit" value="add"/>
    </form>
      
     Without $sce: <h4 data-ng-bind-html="replaceURLWithHTMLLinks(show)"></h4> 
     $sce: <h3 data-ng-bind-html="replace123(show)"></h3>
     Linky: <h1 data-ng-bind-html="show|linky"></h3>
  </div>
</div>

JavaScript

angular.module('test',['ngSanitize'])
.filter('markdown', ['$sce', function( $sce ) {
    var converter = new Showdown.converter();
    var converted = {};

    return function (value) {
      if(converted.hasOwnProperty(value)) {
        return converted[value];
      }

      var html = converter.makeHtml(value);
      var trusted = converted[value] = $sce.trustAsHtml(html);
      return trusted;
    };
}])

.controller('URL',['$scope','$sce',function($scope,$sce) {
  $scope.show="";

  $scope.addTodo = function() {
    $scope.show=$scope.save;
      $scope.replaceURLWithHTMLLinks=function(text) {

    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/i;
    return text.replace(exp,"<a href='$1'>$1</a>"); 
    };
      $scope.replace123=function(text) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/i;
          var abc=text.replace(exp,"<a href='$1'>$1</a>");
          /*alert(abc);
          alert(text);*/
    return $sce.trustAsHtml(abc).toString() ; 
    }; 
  };

}]);