Remember Angular Bootstrap UI active tab

How to set bootstrap active tab on refresh in Angular JS

by Adam Mendoza

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>
<div ng-controller="mainCtrl">
    <tabset>
        <tab 
            ng-repeat="t in tabs" 
            heading="{{t.name}}"
            ng-init="isActive = isActiveTab(t.name, $index)"
            active="isActive"
            select="setActiveTab(t.name)">
                <div ng-bind-html="t.content"></div>
        </tab>
    </tabset>
</div>

JavaScript

angular.module('myApp', ['ui.bootstrap', 'ngSanitize'])
    .controller("mainCtrl", function ($scope) {
    // Set tabs
    $scope.tabs = [{
        name: "one",
        content: '<h1>tab one</h1>'
    }, {
        name: "two",
        content: '<h1>tab two</h1>'
    }, {
        name: "three",
        content: '<h1>tab three</h1>'
    }];
       
    // Save active tab to localStorage
    $scope.setActiveTab = function (activeTab) {
        sessionStorage.setItem("activeTab", activeTab);
    };
    
    // Get active tab from localStorage
    $scope.getActiveTab = function () {
        return sessionStorage.getItem("activeTab");
    };
    
    // Check if current tab is active
    $scope.isActiveTab = function (tabName, index) {
        var activeTab = $scope.getActiveTab();
        return (activeTab === tabName || (activeTab === null && index === 0));
    };
});