JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="TestCtrl">
        <input type="text" placeholder="Enter Name" ng-get-selection="name">{{name}}
        <br/>
        <br/>here select all this text down here</div>

JavaScript

var app = angular.module('app', []);
    
    app.directive('ngGetSelection', function ($timeout) {
        var text = '';
    
        function getSelectedText() {
            var text = "";
            if (typeof window.getSelection != "undefined") {
                text = window.getSelection().toString();
            } else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
                text = document.selection.createRange().text;
            }
            return text;
        }
    
        return {
            restrict: 'A',
            scope: {
                ngGetSelection: '='
            },
            link: function (scope, element) {
                $timeout(function getSelection() {
                    var newText = getSelectedText();
    
                    if (text != newText) {
                        text = newText;
                        element.val(newText);
                        scope.ngGetSelection = newText;
                    }
    
                    $timeout(getSelection, 50);
                }, 50);
    
            }
        };
    });
    
    app.controller('TestCtrl', function ($scope) {
        $scope.name = '';
    });