Angular ng-show и ng-change для отображения и скрытия таблиц в зависимости от выбора пользователя в теге ‹select›

ОБНОВЛЕНИЕ: насколько я понял, вы хотите показать/скрыть другую таблицу только в том случае, если выбрана первая. Вот простое решение:

 <div ng-app="myColors">
  <div ng-controller="cController">
    <h3>drop down 1</h3>
    <select name="select1" ng-model="selectedAnswer1" ng-options="c.cat for c in mySelection1" ng-change="selection1Change()"></select>
    <pre>{{selectedAnswer1}}</pre>
       <h3>drop down 2</h3>
    <select name="select2" ng-model="selectedAnswer2" ng-options="c.cat for c in mySelection2" ng-change="selection2Change()"></select>
    <pre>{{selectedAnswer2}}</pre>
    <hr>
    <div ng-show="selectedAnswer1 && flag1">
    <h4>
     table 1
    </h4>
    <table>
      <tr>
        <td>ID</td>
        <td>Category</td>       
      </tr>
      <tr ng-repeat="f in fruit" ng-show="selectedAnswer1.value === f.id">
        <div >
        <td >{{f.id}}</td>
        <td >{{f.f_category}}</td> 
        </div>
      </tr>
    </table>
    </div>
    <div  ng-show="selectedAnswer2 && flag2">
    <h4>
      table 2
    </h4>
    <table>
      <tr>
        <td>Car</td>
      </tr>
       <tr ng-repeat="c in car" ng-show="selectedAnswer2.value === c.name">        
        <td>{{c.category}}</td>        
      </tr>
    </table>

    </div>
  </div>
</div>

var app = angular.module("myColors", []);
app.controller("cController", function($scope) {

    $scope.mySelection1 = [
    {"cat": "SELECT YOUR ANSWER", "value": null}, 
    {"cat": "YELLOW",  "value": "yellow"},
    {"cat": "ORANGE", "value": "orange"}
  ];
  $scope.mySelection2 = [
    {"cat": "SELECT YOUR ANSWER",  "value": null }, 
    {"cat": "GREEN CAR",  "value": "green"},
    {"cat": "BLUE CAR", "value": "blue"}
  ];
  $scope.fruit = [{
    "id": "red",
    "f_category": ["Apple", "Strawberry", "Pineapple"]
  }, {
    "id": "yellow",
    "f_category": ["Banana", "Pineapple"]
  }, {
    "id": "orange",
    "f_category": ["Peach", "Nectarine"]
  }];

  $scope.car = [{
    "name": "yellow",
    "category": ["SUV", "Truck"]
  }, {
    "name": "blue",
    "category":  ["Van"]
  }, {
    "name": "orange",
    "category": ["Mini-Van"]
  }];
  $scope.selection1Change = function(){
   $scope.flag1 = true;
   $scope.flag2 = false;
  }
    $scope.selection2Change = function(){
  $scope.flag1 = false;
  $scope.flag2 = true;
  }
});

СТАРЫЙ: нет необходимости использовать ng-change, потому что сам angularjs будет обновлять значение ng-model, поэтому вы можете использовать ng-show со значением ng-model, как показано в коде ниже:

<div ng-app="myColors">
  <div ng-controller="cController">
    <h3>drop down 1</h3>
    <select ng-model="selectedAnswer1" ng-options="c.cat for c in mySelection1"></select>
    <pre>{{selectedAnswer1}}</pre>
       <h3>drop down 2</h3>
    <select ng-model="selectedAnswer2" ng-options="c.cat for c in mySelection2"></select>
    <pre>{{selectedAnswer2}}</pre>
    <hr>
    <h4>
     table 1
    </h4>
    <table ng-show="selectedAnswer1">
      <tr>
        <td>ID</td>
        <td>Category</td>       
      </tr>
      <tr ng-repeat="f in fruit" ng-show="selectedAnswer1.value === f.id">
        <div >
        <td >{{f.id}}</td>
        <td >{{f.f_category}}</td> 
        </div>
      </tr>
    </table>

    <h4>
      table 2
    </h4>
    <table ng-show="selectedAnswer2">
      <tr>
        <td>Car</td>
      </tr>
       <tr ng-repeat="c in car" ng-show="selectedAnswer2.value === c.name">        
        <td>{{c.category}}</td>        
      </tr>
    </table>

  </div>
</div>

ng-show позволяет вам воспользоваться преимуществами привязки данных, поэтому вам не нужно вручную отслеживать события, как в ванильном JS (с обработчиками событий или атрибутом onchange). Это предпочтительный способ делать что-то в angularJs. Используйте ngChange только тогда, когда у вас нет другого выбора.

Кроме того, вероятно, было бы даже лучше использовать здесь ng-if, так как вы сэкономите на создании таблиц, когда они не отображаются.

используя директиву ng-change и filter, вы достигаете ожидаемого поведения, взгляните на этот фрагмент

var app = angular.module("myColors", []);
app.controller("cController", function($scope) {
	$scope.selectedFruit = null;
	$scope.selectedCar = null;
	$scope.mySelection1 = [
    {"cat": "SELECT YOUR ANSWER", "value": null}, 
    {"cat": "YELLOW",  "value": "yellow"},
    {"cat": "ORANGE", "value": "orange"}
  ];
  $scope.mySelection2 = [
    {"cat": "SELECT YOUR ANSWER",  "value": null }, 
    {"cat": "GREEN CAR",  "value": "green"},
    {"cat": "BLUE CAR", "value": "blue"}
  ];
  $scope.fruit = [{
    "id": "red",
    "f_category": ["Apple", "Strawberry", "Pineapple"]
  }, {
    "id": "yellow",
    "f_category": ["Banana", "Pineapple"]
  }, {
    "id": "orange",
    "f_category": ["Peach", "Nectarine"]
  }];
  
  $scope.car = [{
    "name": "yellow",
    "category": ["SUV", "Truck"]
  }, {
    "name": "blue",
    "category":  ["Van"]
  }, {
    "name": "orange",
    "category": ["Mini-Van"]
  }];
	
	$scope.selectFruit = function(selectedItem){
		$scope.selectedFruit = selectedItem.value;	
	}	
	$scope.selectCar = function(selectedItem){
		$scope.selectedCar = selectedItem.value;	
	}
  
});

table, th, td {
   border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>


<div ng-app="myColors">
  <div ng-controller="cController">
    <h3>drop down 1</h3>
    <select ng-model="selectedAnswer1" ng-options="c.cat for c in mySelection1" ng-change="selectFruit(selectedAnswer1)"></select>
    <pre>{{selectedAnswer1}}</pre>
       <h3>drop down 2</h3>
    <select ng-model="selectedAnswer2" ng-options="c.cat for c in mySelection2" ng-change="selectCar(selectedAnswer2)"></select>
    <pre>{{selectedAnswer2}}</pre>
    <hr>
    <h4>
     table 1
    </h4>
    <table>
      <tr>
        <td>ID</td>
        <td>Category</td>       
      </tr>
      <tr ng-repeat="f in fruit | filter:selectedFruit">
        <td>{{f.id}}</td>
        <td>{{f.f_category}}</td>        
      </tr>
    </table>
    
    <h4>
      table 2
    </h4>
    <table>
      <tr>
        <td>Car</td>
      </tr>
       <tr ng-repeat="c in car | filter:selectedCar">        
        <td>{{c.category}}</td>        
      </tr>
    </table>
    
  </div>
</div>