Tab Activation

How to avoid "undefined is not a function" error while using active on a tab

HTML

<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
<div ng-controller="tabActivationController">
    <tabset id="tabset">
        <tab heading="Tab 1" ui-sref="tab1" active="tabs['tab1']" title="Activate tab1">
        </tab>
        <tab heading="Tab 2" ui-sref="tab2" active="tabs['tab2']" title="Activate tab2">            
        </tab>
    </tabset>
    <tabset id="subtabs">
        <tab heading="Tab 3" ui-sref="tab1.tab3" active="tabs['tab3']" title="Activate tab3">
        </tab>
        <tab heading="Tab 4" ui-sref="tab2.tab4" active="tabs['tab4']" title="Activate tab4">          
        </tab>
    </tabset>
    <tabset id="subsubtabs">
        <tab heading="Tab 5" ui-sref="tab2.tab4.tab5" active="tabs['tab5']" title="Activate tab5">
        </tab>
    </tabset>
    <div class="row">
        <div class="col-sm-12">{{pageMessage}}</div>
    </div>
</div>

JavaScript

var tabApplication = angular.module('tabApplication', ['ui.router', 'ui.bootstrap']);

tabApplication.controller('tabActivationController', function ($scope, $state) {
    $scope.$state = $state;
    
    $scope.$on('$stateChangeSuccess',
    function (event, toState, toParams, fromState, fromParam) {
        console.log('from', fromState);
        console.log('to', toState);
        $scope.pageMessage = toState.data.pageMessage;
        $scope.tabs = {};
        $scope.tabs['tab1'] = $state.includes('tab1');
        $scope.tabs['tab2'] = $state.includes('tab2');
        $scope.tabs['tab3'] = $state.includes('tab1.tab3');
        $scope.tabs['tab4'] = $state.includes('tab2.tab4');
        $scope.tabs['tab5'] = $state.includes('tab2.tab4.tab5');
    });
});