title: Show and hide table rows in angularjs
body: <p>First, I would like to show all id named <code>"main</code> rows and hide all id named <code>"review"</code> rows.</p>
  
  <p>Second, when I click on one <code>"main</code> row, I would like to show one <code>"review"</code> row under this <code>"main</code> row.</p>
  
  <p>Third step, And then when I click again on another <code>"main</code> row, one <code>"review"</code> row will be shown under this <code>"main</code> row that I clicked, and the first <code>"review"</code> row should be hidden.</p>
  
  <p>In conclusion, I will show only one <code>"review"</code> row depending on the <code>"main</code>  row that I clicked, and hide all other <code>"review"</code> rows to user.</p>
  
  <pre><code>&lt;tbody ng-repeat="(id,product) in products" ng-controller="ProductMainCtrl as main"&gt;
  &lt;tr id="main" ng-click="parseProductId(product.product_id)"&gt;
    &lt;td&gt;{{product.product_id}}&lt;/td&gt;
    &lt;td&gt;{{product.name}}&lt;/td&gt;
    &lt;td&gt;{{product.quantity}}&lt;/td&gt;
    &lt;td&gt;{{order.currency_code}} {{product.unit_price}}&lt;/td&gt;
    &lt;td&gt;{{order.currency_code}} {{product.unit_discount}}&lt;/td&gt;
    &lt;td&gt;{{order.currency_code}} {{product.price}}&lt;/td&gt;
    &lt;td id="arrow"&gt;&lt;a&gt;Write A Review&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr id="review"&gt;
    &lt;td colspan="7"&gt;
      &lt;span ng-include="'views/product/rating_main.html'"&gt;&lt;/span&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>Could I get some ideas for that with angular?</p>