Hide value when hide element

Question

I try to make a select box . The value of select box and input text will show below <hr> tag like

Input text only show when value in select box is Two. But when i switch to other value in select box to make input display none. But value not disappear. I try to make that value disappear when input is hidden. How to do that thank.

Here is my

function Controller ($scope) {
    $scope.myDropDown = 'one';
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="Controller">
    <select ng-model="myDropDown">
          <option value="one" selected>One</option>
          <option value="two">Two</option>
          <option value="three">Three</option>
    </select>
    <br>
    <input ng-model="test" ng-show="myDropDown=='two'" type="text">
    <hr>    
    {{myDropDown}} {{test}}
</div>

Answer 1

here is your code :

function Controller ($scope) {
    $scope.myDropDown = 'one';
  
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="Controller">
        <select ng-model="myDropDown">
              <option value="one" selected>One</option>
              <option value="two">Two</option>
              <option value="three">Three</option>
        </select>
        <br>
        <input ng-model="test" ng-show="myDropDown=='two'" type="text">
        <hr>    
        {{myDropDown}} <span ng-show="myDropDown=='two'">{{test}}</span> 
    </div>

And here is another solution that I like more :

function Controller ($scope) {
  $scope.myDropDown = 'one';
  $scope.showMe = false;
  $scope.changevalue = function(a){
    if(a == 'two'){
      $scope.showMe = true;
    }
    else{
      $scope.showMe = false;
      $scope.test = null;
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="Controller">
  <select ng-model="myDropDown" ng-change="changevalue(myDropDown)">
    <option value="one" selected>One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
  </select>
  <br>
  <input ng-model="test" ng-show="showMe" type="text">
  <hr>    
  {{myDropDown}} {{test}}
</div>