JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app>
  
  <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>
      <h1>{{replaceURLWithHTMLLinks(show)}}</h1>
  </div>
</div>

JavaScript

function URL($scope) {
  $scope.shoe="";

  $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>"); 
    };
  };

}