Angularjs Bootstrap Tab Panel

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div ng-app="tabapp">
    <div ng-controller="MainController">
        <tab-panel on-change="tabChange(e)" on-before-change="beforeTabChange(e)" active="selectedTab">
            <tab title="Home" id="home">
                <p>kdkd</p>
            </tab>
            
            <tab title="Home2" id="home2">
                <p>kdkd2</p>
            </tab>
            
            <tab title="Home3" id="home3">
                <p>kdkd3</p>
            </tab>
        </tab-panel>
        
        <button class="btn btn-primary" ng-click="goNext()">Next</button>
    </div>
</div>

JavaScript

var app = angular.module('tabapp',[]);

app.directive('tabPanel',function($timeout){
    return {
        template: ' <div role="tabpanel" ng-transclude></div>',
        restrict: 'E',
        transclude: true,  
        replace: true,
        scope: {onChange: '&',onBeforeChange:'&',active:'='},
        link: function(scope, element, attrs){
            
            var active = attrs.active;
            
            var contents = $(element).find('div');
            
            var tabNav = $(element).append('<ul class="nav nav-tabs" role="tablist"></ul>').find('ul')[0];
            var tabContent = $(element).append('<div class="tab-content"></div>').find('.tab-content')[0];
            
            for(var i = 0; i<contents.length; i++){
                var content = contents[i];
                var title = $(content).attr('title');
                var id = $(content).attr('id');
                
                $(content).removeAttr('title');
                $(content).remove();
                
                var nav = $('<li role="presentation"><a href="#'+id+'" aria-controls="'+ id +'" role="tab" data-toggle="tab">' + title + '</a></li>');
                           
                if (scope.active !== undefined && scope.active == id) {
                    $(content).addClass('active');
                    $(nav).addClass('active');
                }
                
                $(tabNav).append(nav);
                $(tabContent).append(content);
            }
            
            scope.$watch(function(){return scope.active;},function(value){
                if(value != undefined){ 
                    $timeout(function() {
                       $(element).find('a[href="#'+value+'"]').tab('show');
                    }, 0);
                }
            });
            
            $(tabNav).find('a[data-toggle="tab"]').on('shown.bs.tab',function(e){
                var event = {target: $(e.target).attr('aria-controls'), from:...