<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/splitter/angular">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.bootstrap.min.css" />
<script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.902/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-header" ng-controller="MyCtrl">
<div kendo-splitter k-orientation="Vertical" panes="[ { collapsible: true, size: '220px' } ]">
<div>
Left Content
</div>
<div>
Right Content
</div>
</div>
</div>
</div>
</div>
<script>
angular.module("KendoDemos", ["kendo.directives"])
.controller("MyCtrl", function($scope) {
$scope.orientation = "horizontal";
$scope.hello = "Hello from Controller!";
})
</script>
</body>
</html>
// Code goes here
/* Styles go here */