Activate specific tab after state change in angular

Question

I have a web app built in AngularJS where I use $state to navigate through my different views. I'm also using several AngularUI Bootstrap components and styling, among other Bootstrap tabs.

Now what I was wondering about is if there was some way to, combined with ui-sref, to activate a specific tab after you click on a link and the new view is loaded.

Ex. I'm on the Dashboard view where there is a link that links directly to the second tab inside the Test view

Dashboard html

<div class="panel">
   <div class="panel-heading">
       <h4">Go to Test view and activate Image tab</h4>
   </div>
   <div class="panel-body">
       <a ui-sref="app.test({id: id})" class="btn btn-info">Test</a>
   </div>
</div

Test html

<tabset class="nav-tabs-alt" justified="true">
    <tab>
        <tab-heading>Information</tab-heading>
        <div class="Content">...</div>
    </tab>
    <tab>
        <tab-heading>Image</tab-heading>
        <div class="Content">...</div>
    </tab>
</tabset>

Answer 1

Use a variable to represent if a tab is active using the active attribute. In my code I am using a scope variable called imageActive.

 <tabset class="nav-tabs-alt" justified="true">
    <tab active="informationActive">
        <tab-heading>Information</tab-heading>
        <div class="Content">...</div>
    </tab>
    <tab active="imageActive">
        <tab-heading>Image</tab-heading>
        <div class="Content">...</div>
    </tab>
</tabset>

Then make a link click set this variable appropriately, which will activate the 2nd tab:

 <a class="btn btn-info" ng-click="imageActive= true;">Test</a>