Ng-hide outside ng-click elements

Question

I'm using ng-hide to hide a prompt. The ng-click button is in a table. When I click the ng-click button it hides the table. The problem comes when I also have an ng-hide outside of the table. Clicking the ng-click has no affect on the ng-hide. Below is an example.

<p ng-hide="dismiss"><b>We found the below information on your social media profile. Would you like to import it into your information below?</b></p>

<table ng-hide="dismiss" ng-if="auth0.user.provider == 'instagram' || auth0.user.provider == 'google-oauth2'" class="application {{auth0.user.provider}}">
<tr>
    <td><img class="circle" src="{{auth0.user.picture}}"/></td>
    <td>{{auth0.user._json.name}}, unfortunatly {{auth0.user.provider}} does not provide enough data to import, please fill in below.</td>
    <td><button ng-click="dismiss = true">Dismiss</button></td>
</tr>
</table>

The table will hide, but the content in the p tag remains. When I move it outside the table both will hide. I like the formatting of it in the table and can't see what exactly is causing this.

Answer 1

ng-if creates a child scope. Try this test - cut the ng-if from your table temporarily. Now both the paragraph and table should hide when you click the button. Could you possibly combine the ng-if conditions into the table's ng-hide?

Answer 2

That's because ng-if creates a new scope. Try to use objects instead of primitives. Meaning, instead of using dismiss , you could do something similar to this:

Controller:

$scope.control = {};

HTML:

<p ng-hide="control.dismiss"><b>We found the below information on your social media profile. Would you like to import it into your information below?</b></p>

<table ng-hide="control.dismiss" ng-if="auth0.user.provider == 'instagram' || auth0.user.provider == 'google-oauth2'" class="application {{auth0.user.provider}}">
<tr>
    <td><img class="circle" src="{{auth0.user.picture}}"/></td>
    <td>{{auth0.user._json.name}}, unfortunatly {{auth0.user.provider}} does not provide enough data to import, please fill in below.</td>
    <td><button ng-click="control.dismiss = true">Dismiss</button></td>
</tr>
</table>