This site describes our support for the AngularJS (1.x) framework. Visit for information on our latest version.

Tab sref

The tab sref directive adds the ability to change the page's URL when the user clicks a tab. This also allows for users to navigate straight to a selected tab from a hyperlink.


Tab sref settings

  • bb-tab-sref="stateName" — The name of the state where the application should navigate when the tab is selected.

Optional state parameters can be provided

  • bb-tab-sref="stateName({param: value, param: value})" — Navigate to state, with params.




  <script type="text/ng-template" id="demo/tabsref/tabset.html">
      <uib-tab heading="Tab 1" bb-tab-sref="TabState1">Content</uib-tab>
      <uib-tab heading="Tab 2" bb-tab-sref="TabState2({username: 'John'})">
        <div ng-controller="TabSrefTestController">
          Content 2 - Username: {{ username }}
      <uib-tab heading="Tab 3" bb-tab-sref="TabState3">Content 3</uib-tab>



/*global angular */
(function () {
    'use strict';

    function TabSrefConfig($stateProvider, $urlRouterProvider) {
            .state('rootState', {
                url: '/',
                templateUrl: 'demo/tabsref/tabset.html',
                params: { username: '' }
            .state('TabState1', {
                parent: 'rootState',
                url: 'tabsref/tab1'
            .state('TabState2', {
                parent: 'rootState',
                url: 'tabsref/tab2/:username',
                params: { username: '' }
            .state('TabState3', {
                parent: 'rootState',
                url: 'tabsref/tab3'

        $urlRouterProvider.when('', '/');

    TabSrefTestController.$inject = ['$scope', '$stateParams'];
    function TabSrefTestController($scope, $stateParams) {
        $scope.username = $stateParams.username;

    TabSrefConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
        .controller('TabSrefTestController', TabSrefTestController);