Angular: Fade Out and Hide

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ng-controller="myCtrl">
    <button ng-click="hideStuff()">Hide!</button>
    <button ng-click="showStuff()">Show!</button>
   
    <div>
        <input placeholder="{{label}}" 
        class="default" ng-hide="hidden" ng-class="{'fade': startFade, 'show': !startFade}" type="text" ng-model="value" />
      <code>val {{!value.length}}</code>
      <code>val {{!!value.length}}</code>
    </div>
    
</div>

CSS

.default{
    opacity: 1;
    border:1px solid #000;
}

.fade{
    -webkit-transition: opacity 2s; /* For Safari 3.1 to 6.0 */
    transition: opacity 2s;
    opacity: 0;
}

.show{
    -webkit-transition: opacity 2s; /* For Safari 3.1 to 6.0 */
    transition: opacity 2s;
    opacity: 1;
}

JavaScript

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

myApp.controller("myCtrl", function($scope, $timeout){
		$scope.label = 'input 1';
    
    $scope.showStuff = function () {
       $scope.value = null;
       console.log($scope.value);
    };
});