Right, when you change the two-way binding attribute, it does not reflect the change in selectedTabId. This is probably because digest cycle does not carry the change to the lightning:namespace component attribute "selectedTabId". Hence we have set the "selectedTabId" attribute explicitly for the change to happen.
You could implement something as follows
var selected = component.get("v.key"); //key used for storing tab ids.
component.find("tabs").set("v.selectedTabId",selected);
But, implementing the above at every value change could be tedious to maintain especially if there are other logic supplements.
Instead, we could use the value:change handler to do that during every variable assignment.
Application
<aura:application extends="force:slds" access="global">
<aura:attribute name="key" type="String" default="two" />
<aura:handler name="change" value="{!v.key}" action="{!c.selectTab}"/>
<lightning:tabset aura:id="tabs" selectedTabId="two">
<lightning:tab label="Item One" id="one">
Sample Content One
</lightning:tab>
<lightning:tab label="Item Two" id="two">
Sample Content Two
</lightning:tab>
<lightning:tab label="Item Three" id="three">
Sample Content Three
</lightning:tab>
</lightning:tabset>
<br/><br/><br/>
<lightning:button variant="brand" label="ChangeValue" onclick="{!c.handleClick}" />
</aura:application>
Controller
({
selectTab : function(component, event, helper) {
/* General utility */
var selected = component.get("v.key");
component.find("tabs").set("v.selectedTabId",selected);
},
handleClick : function(component, event, helper){
component.set("v.key","three"); // value assignation
}
})
The value change (v.key) is now monitored by the value change handler. And it would fire the selectTab action from the controller and it would set the selecteTabId attribute.
This way whenever the two-way binding attribute is changed, the selected tab would change. If the aura:attribute used is an object, then you could use conditional checks and sanitizations to suit your requirements.
You can use "selectedTabId" attribute for this purpose.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<aura:attribute name="tabId" type="String" default="google" />
<lightning:tabset variant="scopped" selectedTabId="{! v.tabId }">
<lightning:tab label="Google Search" id="google">
Google Search
</lightning:tab>
<lightning:tab label="Yahoo" id="yahoo">
<lightning:button variant="brand" label="Navigate To Google Tab" onclick="{! c.navigateToGoogleTab }" />
</lightning:tab>
</lightning:tabset>
Controller
({
navigateToGoogleTab : function(component, event, helper) {
component.set("v.tabId","google");
}
})
Best Answer
You can try creating the component's directly using JS.
for ex.
Also, you need to to create this component everytime when you switch between tabs.
This approach will always load the component directly into the tab.