Set active heading Angular UI Tabs

Question

I am using Angular ui.bootstrap.tabs directive. And I need set active heading of the tab. But when I try to use this directive it not set class active

So this is Demo:

<uib-tabset active="active">
    <uib-tab index="0" heading="Static title">Static content</uib-tab>
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled">
        {{tab.content}}
    </uib-tab>
    <uib-tab index="3" select="alertMe()">
        <uib-tab-heading>
            <i class="glyphicon glyphicon-bell"></i> Alert!
        </uib-tab-heading>
        I've got an HTML heading, and a select callback. Pretty cool!
    </uib-tab>
</uib-tabset>

Code from inspector:

<li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item ng-isolate-scope [object Object]" index="3">

I think error is here - [object Object] But I don't know how I can track it.

my rails require:

//= require angular
//= require angular-rails-templates
//= require angular-ui-router
//= require angular-ui-bootstrap
//= require angular-ui-bootstrap-tpls
//= require angular-ui-select
//= require angular-animate
//= require interact
//= require angular-devise
//= require angular-datepicker
//= require moment
//= require moment-timezone
//= require ng-file-upload
//= require_tree .

app.js:

angular.module('flapperNews', ['ui.router', 'ui.bootstrap', 'templates', 'Devise', 'datePicker', 'ngFileUpload', "ui.select"]).config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
}]);

controller:

angular.module('flapperNews').controller('EventsCtrl', [
'$scope',
'events',
    'Auth',
function($scope, events, Auth){
    $scope.auth = Auth.isAuthenticated()
    $scope.events=events
    $scope.deleteEvent = function(id){
        events.destroy({
            id: id,
        });
    }
    console.log($scope)

}])