how to specify href parameter for angular ui-bootstrap tabs directive

Question

I am using the angular ui-bootstrap library but i cant figure how to specify a custom href for each tabs.

<tab ng-repeat="tab in tabs" active="tab.active" heading={{tab.name}}></tab> 

In the angular ui-bootstrap docs, an optional parameter select() was specified but i have no idea how to use this is customizing the links for each tab

Another way to rephrase the question is how to use routing with angular ui-bootstrap tabs

Answer 1

I hope it's not too late, but I encountered the same problem today. You can achieve it by:

1) Defining tab hrefs in the controller:

$scope.tabs = [
  { title:"tab1", href:"#/route1/page1" },
  { title:"tab2", href:"#/route1/page2" }
];

2) Declaring a function to change hash in the controller:

$scope.changeHash = function(data) {
  window.location.hash = data;
};

3) Use the following markup:

  <tabset>
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}"
        active="tab.active" select="changeHash(tab.href)" />
  </tabset>

I'm not really sure on whether this is the best approach and I would love to hear from others.

Answer 2

When using angular-ui-router,you only need add an ui-sref attrib. e.g.

<tabset>
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}"
    active="tab.active" ui-sref="stateName({param:somevalue,param2:tab.somekey})" /></tabset>