angular JS table row show/hide - angularjs

Question

<table >
<thead>
<tr >
<th>Honda</th>
</tr>
</thead>
<tbody>
<tr>
<td>CRV</td>
<td>HRV</td>
<td>Accord</td>
</tr>
</tbody>
<tr>
<th>Toyota</th>
</tr>
</thead>
<tbody >
<tr>
<td>Camry</td>
<td>Corolla</td>
</tr>
</tbody>
</table>
I have a requirement to show / hide table row. This form should hide the car model initially and show only Honda and Toyota. when you click Honda, it should show all the honda's model. How to achieve this in angualr js. Please help me.

Answer 1

you can use ng-hide and ng-show option of angular js. It takes boolean which can be initiated no click event.
<table >
<thead ng-show="showHonda">
<tr >
<th>Honda</th>
</tr>
</thead>
<tbody ng-hide="showHonda">
<tr>
<td>CRV</td>
<td>HRV</td>
<td>Accord</td>
</tr>
</tbody>
<thead ng-show="showToyota">
<tr>
<th>Toyota</th>
</tr>
</thead>
<tbody ng-hide="showToyota">
<tr>
<td>Camry</td>
<td>Corolla</td>
</tr>
</tbody>
</table>
and on ng-click event change the value of showHonda and showToyota accordingly.

Answer 2

<table ng-app="myApp" ng-controller="customersCtrl">
<thead>
<tr data-ng-click="ShowHonda=!ShowHonda">
<th>Honda</th>
</tr>
</thead>
<tbody>
<tr data-ng-show="ShowHonda">
<td>CRV</td>
<td>HRV</td>
<td>Accord</td>
</tr>
</tbody>
<tr data-ng-click="ShowToyota=!ShowToyota">
<th>Toyota</th>
</trdata-ng-click>
</thead>
<tbody>
<tr data-ng-show="ShowToyota">
<td>Camry</td>
<td>Corolla</td>
</tr>
</tbody>
</table>
Script :-
var myAngApp = angular.module('myApp', []);
myAngApp.controller('customersCtrl', function ($scope) {
$scope.ShowHonda = false;
$scope.ShowToyota = false;
});