Angular-Kendo Bar/Column chart series

<!DOCTYPE html>
<html>

  <head>
  
   <title>Kendo Column Chart</title>
    
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.dataviz.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.dataviz.default.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
   
    <script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1316/js/angular.min.js"></script>
     
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
  
    <script src="script.js"></script>
  
  </head>

<!-- BOB TEST - GRID WITH DROPDOWN LIST -->

  <body ng-app="app" ng-controller="myCtrl">
  <h1>Angular-Kendo Column Charts</h1>
    
  <div kendo-chart k-options="chartOptions" k-rebind="chartOptions"></div>

  <style scoped>
  
  </style>
  
  </body>

</html>

// Code goes here

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

app.controller("myCtrl", function ($compile, $scope) {
 
   $scope.chartOptions = /* chart data*/
         {
    "title": {
        "text": "Bar Chart",
        "position": "bottom"
    },
    "legend": {
        "visible": true,
        "position": "top"
    },
    "seriesDefaults": {
        "type": "column",
        "stack": false
    },
    "series": [
        {
            "field": "field1",
            "name": "1 Day VaR (99%)"
        },
        {
            "field": "field2",
            "name": "10 Day VaR (99%)"
        },
        {
            "field": "field3",
            "name": "Day over Day VaR"
        }
    ],
    "dataSource": [
        {
            "field1": 5546919.064936,
            "field2": 12667955.381901,
            "field3": 0
        },
        {
            "field1": 2297941.24812,
            "field2": 7451762.537854,
            "field3": 0
        },
        {
            "field1": 9832458.096596,
            "field2": 32491698.248662,
            "field3": 0
        },
        {
            "field1": 22700818.88167,
            "field2": 76902823.758745,
            "field3": 0
        },
        {
            "field1": 3742748.296602,
            "field2": 10250567.674588,
            "field3": 0
        }
    ],
    "valueAxis": {
        "labels": {
            "format": "{0:c}",
            "rotation": 0
        },
        "line": {
            "visible": false
        },
        "axisCrossingValue": 0
    },
    "categoryAxis": {
        "categories": [
            "London",
            "New York",
            "Dubai",
            "Paris",
            "Stockholm"
        ],
        "majorGridLines": {
            "visible": false
        },
        "labels": {
            "rotation": -30,
            "margin": 0
        }
    },
    "tooltip": {
        "visible": true,
        "template": "#= series.name #: #= kendo.format('{0:C0}', value) #"
    }
}
  // setup new 'kendoWidgetWatcher'
  var kendoWidgetWatcher;
  
  registerWatcher();
  
  function registerWatcher() {
      kendoWidgetWatcher = $scope.$on("kendoWidgetCreated", refreshKendoWidgets);
  }
  function refreshKendoWidgets(ev, widget) {
    
    elem2 = widget.element.parent().find('.k-chart').data("kendoChart");  //widget.element.parent().find('.k-chart');
    if (elem2 !== undefined) {
        
        var wt = widget.getSize().width; // first time coming out of modal, this is alway zero !!
        
        if (wt === 0) {
            // otherwise the kendo widget does not size properly within its container.
            wt = (window.innerWidth / 2) - 60;
        }
        
        ht = widget.element.height(); // get the container's height; getSize().height above is too high
        elem2.setOptions({ chartArea: { height: ht, width: wt } });
        elem2.resize($(".k-chart"));
        
        if (kendoWidgetWatcher) {     // disable watch (otherwise it fires several more times)
            kendoWidgetWatcher();   
        }
    }
    
  }
        
});