How to make a tab active from the beginning in Angular Bootstrap UI?

Question

I'm trying to make one of the tabs active (tabs are already in the template), depending on some url params. Unfortunately, it always make active by default the first one found in the html template, even if I use a ng-repeat as in this example.

This doesn't work:

$scope.tabs = {
        title2: {active:false, content:"Hello world 2!"},
        title3: {active:false, content:"Hello world 3!"},
        title4: {active:false, content:"Hello world 4!"}
    }
    $scope.tabs.title4.active = true;

Here is a fiddle: http://jsfiddle.net/alexrada/KFAXH/5/

Answer 1

you need to use the $routeParams service inside your controller and set the the $scope active value from it. something along these lines:

.controller('MyTabCtrl', function($scope, $routeParams) {
  $scope.tabs[$routeParams.active].active = true;
})

where the URL would be /?active=title4

you will also need to set up your $routeProvider service. I'll see if I can get a fork of your JSFiddle to work once it becomes usable again (it's soooo slow currently...)

Answer 2

Issue Fixed, you need to use basic concept of ui.bootstrap First Tab will be active by default

Html Code :

<div ng-controller="MyTabCtrl">
    <tabset>
        <tab heading="title1">{{tabs.title1.content}}</tab>
        <tab heading="title2">{{tabs.title2.content}}</tab>
        <tab heading="title3">{{tabs.title3.content}}</tab>
    </tabset>
</div>

script code

angular.module("myApp", ['ui.bootstrap']).
controller("MyTabCtrl", function($scope) {
    $scope.panes = [
        {title:"First", content:"Hello world!"},
        {title:"Second", content:"Bonjour monde!"},
        {title:"Second", content:"Bonjour monde!"}
    ];
    $scope.tabs = {
        title1: {content:"Hello world 1!"},
        title2: {content:"Hello world 2!"},
        title3: {content:"Hello world 3!"}
    }
  // $scope.tabs.active = true;
});

Working Example : http://jsfiddle.net/KFAXH/28/