<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css"/>
    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
    <script src="script.js"></script>
    
</head>
<body>
  
  <div ng-app="app" ng-controller="MyCtrl as vm">
    
      <h1>Kendo: dynamic PanelBar with form</h1>

      <div kendo-panel-bar k-options="panelBarOptions"></div>

      <h3>Data Model:</h3>
      <pre>{{vm.numbox}}</pre>

  </div>
  
</body>
</html>
angular.module("app", ["kendo.directives"]).controller("MyCtrl", ["$scope", "$templateCache", function($scope, $templateCache) {
  
  var scope = this;
  scope.numbox = {};
  
  var data = [
    {head: 'Panel 1 - two items', items: [{text: 'This is a <i>formatted</i> <b>text</b>', key: 'k1', value: 123}, {text: 'This is a <i>formatted</i> <b>text</b>', key: 'k2', value: 456}]},
    {head: 'Panel 2', items: {text: 'This is a <i>formatted</i> <b>text</b>', key: 'k3', value: 789}},
    {head: 'Panel 3', items: {text: 'This is a <i>formatted</i> <b>text</b>', key: 'k4', value: 100}},
  ];
  
  var panelBar = {};
  
  var createTemplate = (function(dataItems) {
    var tplStrg = '';
    if(!dataItems.length) dataItems = [dataItems];
    dataItems.forEach(function(item) {
      tplStrg += '<p>' + item.text + ' <input kendo-numerictextbox ng-model="vm.numbox.' + item.key +'"></p>'
      // fill model
      scope.numbox[item.key] = item.value;
    });
    return tplStrg;
  });
  
  panelBar.panelDataSource = (function() {
    var result = [];
    data.forEach(function(d, i) {
      result.push({
        text:d.head, 
        encoded:false , 
        content:$templateCache.put("panelContent.html",
          createTemplate(d.items)
        ),
      });
    });
    return result;
  }());
  
  panelBar.panelBarOptions = {dataSource: panelBar.panelDataSource};
  
  $scope.panelBarOptions = panelBar.panelBarOptions;
}]);