JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="helloApp" ng-controller="helloCtrl">
  <p>Name:
    <input type="text" placeholder="your name" ng-model="myName">
  </p>
  <div>Hi {{myName}}</div>
  <div ng-show="nothingEnteredFlag">You haven't entered anything yet!</div>
  <div>{{message}}</div>

JavaScript

var app = angular.module("helloApp", []);
app.controller("helloCtrl", function($scope, $timeout) {
  $scope.nothingEnteredFlag = false;
  $scope.myName = "";
  $scope.$watch("myName", function(newValue, oldValue) {
    if ($scope.myName.length < 5) {
      $scope.message = "Short name!";
    } else {
      $scope.message = "Long name!";
    }
    $scope.nothingEnteredFlag = false;
    $timeout.cancel(timer);
    timerFunction();
  });
  var timer;
  var timerFunction = function() {
    timer = $timeout(function() {
      $scope.nothingEnteredFlag = true;
    }, 5000);
  };
  timerFunction();
});