After appending tabs, the behavior when switching tabs is not correct (using Chrome at the moment). Please run the code sample below.
<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
"//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"
>
<
link
rel
=
"stylesheet"
href
=
"//cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"//cdn.kendostatic.com/2014.2.1008/styles/kendo.rtl.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"//cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"//cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"//cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.default.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"//cdn.kendostatic.com/2014.2.1008/styles/kendo.mobile.all.min.css"
>
</
head
>
<
body
ng-app
=
'app'
>
<
div
ng-controller
=
'Ctrl'
>
<
div
>Add two tabs, click on the 2nd, then the 3rd. Then click on tabs 1 or 2.
<
a
href
=
""
ng-click
=
"addTab()"
>{{label}}</
a
>
</
div
>
<
div
id
=
"tabstrip"
kendo-tab-strip>
<
ul
>
<
li
class
=
'k-state-active'
>Tab 1</
li
>
</
ul
>
<
div
>This is content for tab 1</
div
>
</
div
>
</
div
>
<
script
src
=
"//code.jquery.com/jquery-1.11.0.min.js"
></
script
>
<
script
src
=
"//code.jquery.com/ui/1.11.1/jquery-ui.js"
></
script
>
<
script
src
=
"//code.angularjs.org/1.3.0/angular.min.js"
></
script
>
<
script
src
=
"//cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"
></
script
>
<
script
>
(function(){
var app = angular.module('app', ['kendo.directives']);
app.controller('Ctrl', function($scope) {
var i = 2;
$scope.label = "Add Tab";
$scope.addTab = function() {
$('#tabstrip').kendoTabStrip().data('kendoTabStrip').append({
text: 'Tab ' + i,
content: 'This is context for tab ' + i
});
i++;
};
});
})();
</
script
>
</
body
>
</
html
>