How to handle selected/unselected ng-class to manage a tabbed popover

Question

My code is as follows (the fiddle):

<div ng-controller="myCtrl">
    <div ng-model="currentTab" ng-init="currentTab='Tab1'"/>
    <div ng-init="popovers = [  
        {   name: 'Popover1',   
            displayName: 'Pop over with two tabs',
            tabs: [
                {   name: 'Tab1',       
                    displayName: 'First tab',
                    description: ['First tab description']
                },
                {   name: 'Tab2',       
                    displayName: 'Second tab',
                    description: ['Second tab description']
                }
            ]
        }
    ]"/>

    <b>Tabs in popover</b>

    <div
        class="popover"
        ng-repeat="p in popovers" 
        >
        Popover name: {{p.displayName}}
        <div ng-repeat="t in p.tabs" 
            class="tab"
            ng-class="currentTab==t.name?'selected':''"
            ng-click="currentTab=t.name"
            >
                {{t.name}}
        </div>
        <div  ng-repeat="t in p.tabs" 
            class="tabContent" 
            ng-class="currentTab==t.name?'selected':''"
            >
            <p>{{t.displayName}}</p>
        </div>
    </div>
</div>

There is something I don't get which make the code not working perfectly, as the selected class name is never removed as one click on the tab.

Answer 1

When you want to modify a variable of your parent scope from within a ng-repeat you need to use $parent.currentTab.

Updated Fiddle