ng-if is not working as expected

Question

I'm trying to use ng-if to show and hide some data based on tabs because I don't want all the html to be on the DOM all the time. Here's what I'm trying to do. It seems the ng-if is working only when the page is loaded, after that on the click of the sub tabs, it's still updating the scope variable, but I don't see the change on the UI. Please help.

Thanks.

Answer 1

Remove ng-href="#" from your links. This is all you need:

<li ng-repeat="subTab in tabData.SubTabs">
    <a ng-click="subTabClicked(subTab)">{{subTab.Name}}</a>
</li>

With ng-href present, currentTabId is being updated on a child scope for each tab. On the parent scope, where ng-if is watching, currentTabId was never changed.

Here is a demo: http://plnkr.co/ISwjaWKggdbGL38BW078