AngularJS + KendoUI Local Binding Diagram

How do I implement KendoUI with AngularJS Chart with local binding?

My local data:

var blogComments = [ {
  "blog": "My blog",
  "day": "1",
  "value": 3,
  "userColor": "#ffd600"
}, {
  "blog": "My blog",
  "day": "2",
  "value": 7,
  "userColor": "#ffd600"
}, {
  "blog": "My blog",
  "day": "11",
  "value": 14,
  "userColor": "#ffd600"
}, {
  "blog": "My blog",
  "day": "12",
  "value": 15,
  "userColor": "#ffd600"
}, {
  "blog": "My blog",
  "day": "30",
  "value": 6,
  "userColor": "#ffd600"
} ];

      

        
        
        
      

    

I want to use this as a data source:

$scope.theBlog = new kendo.data.DataSource({
  dataSource: {
    data: blogComments
  }
});

      

        
        
        
      

    

Here is my HTML:

<div kendo-chart
  k-legend="{ position: 'bottom' }"
  k-series-defaults="{ type: 'bar',  labels: {
    visible: true,
    background: 'transparent' } }"
  k-data-source="theBlog"
  k-series-hover="onSeriesHover"
  k-series="[{name:'Value', field:'value'}]">
</div>

      

        
        
        
      

    

It doesn't seem to be picking up k-row from datasource. The chart is blank and does not show any data. All KendoUI samples that are AngularJS-specific have remote JSON data. Please help. What am I missing?

Code on dojo: http://dojo.telerik.com/IziY/12