JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
<div ng-controller="MyController">
    
<button ng-disabled="checked" 
    ng-click="changeStatus()">Click to show/hide the input box</button>
    <hr/>
    <p>Current visible status: {{visible}}</p>
   <input type="text"  placeholder="Type" ng-show="visible" ng-blur="hideAll()">  
       
</div>
    </div>

JavaScript

var myApp = angular.module('myApp',[]);


myApp.controller('MyController', function($scope) {

    $scope.visible = false;
    $scope.changeStatus = function(){
        $scope.visible = !$scope.visible; 
    }
    $scope.hideAll= function(){
      $scope.visible=false;
    }
});