JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="test" ng-app="app">
    <input id = "inp" inp re type="text" ng-model="content">
    <pre id = "mem" ng-bind="content"></pre>
    <button ng-click="suspend()">Suspend</button>&nbsp;
    <button ng-click="resume()">Resume</button>
</div>

JavaScript

app = angular.module('app', []);
app.controller('test', function( $scope , $timeout) {
    $scope.content = 'Type in the input';
    $scope.mem = angular.element(document.getElementById('mem'));
    $scope.inp = angular.element(document.getElementById('inp'));
    $scope.suspend = function() {
        $scope.$broadcast('suspend');
        $scope.inp.removeAttr('ng-model')
    };
    $scope.resume = function() {
        $scope.$broadcast('resume');
        $scope.inp.attr('ng-model', 'content')
    };
});
app.directive('re', function(){
    return {
        controller: function($scope){ 
            $scope.$on('resume', function(){
                $scope.inp.val($scope.mem.text());
                $scope.$new();
            });
        }
    }
});
app.directive('inp', function(){
    return {
        scope: 1,
        controller: function($scope){ 
            $scope.$on('suspend', function(){
                $scope.$destroy();
            });
        }
    }
});