JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="MainCtrl">
    <textarea x2 ng-model="nr"></textarea>
    <div>{{nr}}</div>
</div>

CSS

textarea {resize:none}

JavaScript

angular.module('app', [])
.controller('MainCtrl', function($scope) {
    $scope.nr = 1;
})
.directive('x2', function(){
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                element.bind('blur', function (e) {
                    scope.$apply(function () {
                        scope.nr = scope.nr * 2;
                    });
                });
            }
        };
  });