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">
    <dire my-text="goto tab2" state="tab2"></dire>
    <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.config(function config($stateProvider, $locationProvider) {
		$locationProvider.html5Mode(true);
    $stateProvider.state('initial', {
        url: '',
        data: {
            pageMessage: 'Initial state, no tabs active'
        }
    }).state('tab1', {
        url: '/tab1',
        data: {
            pageMessage: 'Tab 1 is active! Woohoo!'
        }
    }).state('tab2', {
        url: '/tab2',
        data: {
            pageMessage: 'Tab 2 is active! Amazing!'
        }
    }).state('tab1.tab3', {
        url: '/tab1/tab3',
        data: {
            pageMessage: 'Subtab 3 is active! And it\'s a Tab 1 subtab! Incredible!'
        }
    }).state('tab2.tab4', {
        url: '/tab2/tab4',
        data: {
            pageMessage: 'Subtab 4 is active! And it\'s a Tab 2 subtab! Wow!'
        }
    }).state('tab2.tab4.tab5', {
        url: '/tab2/tab4/tab5',
        data: {
            pageMessage: 'Subtab 5 is active! And it\'s a Tab 4 subtab! End!'
        }
    });
});

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');
    });
});

tabApplication.directive('dire',function(){
		var directive =
    {
        restrict: "E",
        template: "<a class='btn btn-info' ng-click='ctrl.go()'><i class='fa {{ctrl.icon}}'></i> {{text}}</button>",
        scope:
   ...