ng-if or ng-show

I just came across something that I figured out quickly enough, but really threw me off for a few minutes.

In Angular, I know that ng-if and ng-show aren't interchangeable, but in most situations they seem to be pretty interchangeable and I don't know the differences between them - other than ng-if doesn't render things if the "if" condition isn't met.

I have a table that shows/hides a <th> and a corresponding <td> based on an ng-if.  That was all working fine until I needed to change the <tr> inside of which the <td> exists to also rely on (a differnet) ng-if.  Once I added that, I found that the condition on which the <td> relied wasn't updating when the underlying model value was being changed, but only in the header evaluation.  That meant the <th> was staying put while the <td> was toggling, which caused me a bit of confusion.

A coworker just stopped by to tell me it has to do with the fact that ng-if creates a new scope and ng-show doesn't, but we both agree that this still seems like a weird scenario.  An example is below.


This doesn't work:

<table>
    <tr>
        <th ng-show="OptionA == true">Column 1 Header</th>
        <th ng-show="OptionA == false">Column 2 Header</th>
        <th>Column 3 Header</th>
    </tr>
    <tr ng-if="OptionB == true">
        <td ng-show="OptionA == true">Column 1 Row 1 Data</td>
        <td ng-show="OptionA == false">Column 2 Row 1 Data</td>
        <td>Column 3 Row 1 Data</td>
    </tr>
    <tr ng-if="OptionB == false">
        <td colspan="3">Row 2 Merged Data</td>
    </tr>
</table>

But this does:

<table>
    <tr>
        <th ng-show="OptionA == true">Column 1 Header</th>
        <th ng-show="OptionA == false">Column 2 Header</th>
        <th>Column 3 Header</th>
    </tr>
    <tr ng-show="OptionB == true">
        <td ng-show="OptionA == true">Column 1 Row 1 Data</td>
        <td ng-show="OptionA == false">Column 2 Row 1 Data</td>
        <td>Column 3 Row 1 Data</td>
    </tr>
    <tr ng-show="OptionB == false">
        <td colspan="3">Row 2 Merged Data</td>
    </tr>
</table>