Angular ng-show and ng-change to show and hide tables depending on the user selection in <select> tag

Question

UPDATE: Sorry, I should've made it more clear but what I wanted also was if I select from the "drop down 1" other than the null value, my table 2 automatically disappears b/c I only want to see table 1 when I am using drop down 1. Same thing for "drop down 2". If I choose any non-null values from drop down 2, my table 1 disappears and I only see table 2. I also updated my Fiddle here https://jsfiddle.net/missggnyc/4vod1L9g/7/ and the tables are hiding if the null values are selected from the drop down. All I need now is how to show one or the other table depending on which drop down I am using.

---

ORIGINAL POST: I am getting a bit confused about how to use ng-show or ng-change to show my two different tables depending on the user selection with two dif. drop downs.

Here's the scenario:

As long as the user doesn't select SELECT YOUR ANSWER with null value in both drop downs, I have a filter that does the string comparison and filters out by color. This is what I want to do.

User selects from "drop down 1"

• show table 1 with filtered results if the user doesn't select "SELECT YOUR ANSWER" with null value
• if the user selects "SELECT YOUR ANSWER", then no tables are displayed
• hide table 2 as long as "drop down 1" is getting selected

User selects from "drop down 2"

• show table 2 with filtered results if the user doesn't select "SELECT YOUR ANSWER" with null value
• if the user selects "SELECT YOUR ANSWER", then no tables are displayed
• hide table 2 as long as "drop down 1" is getting selected

I am confused about how to use ng-show or ng-change in my case. Any suggestions?

See demo here

HTML

<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=""></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>
      <tr>
        <td>ID</td>
        <td>Category</td>       
      </tr>
      <tr ng-repeat="f in fruit">
        <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">        
        <td>{{c.category}}</td>        
      </tr>
    </table>

  </div>
</div>

JS

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"]
  }];

});

Answer 1

UPDATE: as far I understood you only want show/hide the other table if the first one is select. Here is a simple solution:

 <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;
  }
});

---

OLD: No need for to use ng-change, because angularjs itself it will be update the value of ng-model, so you can use ng-show with the value of ng-model, as show in the code bellow:

<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>