grid detail template datasource angular

[Alex]

Using the kendo example for angular (http://demos.telerik.com/kendo-ui/grid/angular).

I have a simple kendo ui grid setup (kendo ui and angularjs) with a detail template that retrieves the data properly for the detail template (can see the correct data returned in the browsers developer console, attached as screenshot ) ,

 <div>
    <div 
    kendo-grid
    options="homeGridOptions">  
        <div k-detail-template>
        <div kendo-grid options="detailGridOptions(dataItem)">
        </div>
        </div>  
    </div>
</div>

 

and in the angular controller

   $scope.homeGridOptions = {
        dataSource: $scope.userchartsDS,
        sortable: true,
        pageable: true,
        dataBound: function() {
                    this.expandRow(this.tbody.find("tr.k-master-row").first());
                },
        columns: [
        { 
            field: "chartno",
            title: "Chart"
        }
        ]
    };

    $scope.chartsDS = new kendo.data.DataSource({
         transport: {
           read: {
             url: "http://site.local/api/v1/index.php/user/home",
             dataType: "json"
           }
         }
      });

    $scope.detailGridOptions = function(dataItem) {
                return {
                    dataSource: {
                        type: "json",
                        transport: {
                            read: "http://site.local/api/v1/index.php/products/chart/" + dataItem.chartno + "/20100101/20150515"
                        },

                        filter: { field: "PRODUCT_NAME", operator: "eq", value: dataItem.chartno }
                    },
                    scrollable: false,
                    sortable: true,
                    pageable: true,
                    columns: [
                    { field: "PRODUCT_NAME", title:"chart", width: "56px" },
                    { field: "VERB_CODE", title:"verb code", width: "110px" },
                    { field: "PRODUCT_REF_EN", title:"product" },
                    { field: "VERB_NAME_EN", title: "Verb", width: "190px" }
                    ]
                };
            };

}]);

but the detail template is not populating with the data.  I can see in batarang this information for the detail grids model

{ column:

{ encoded: true

hidden: null

field: PRODUCT_NAME title: Chart

width: 56px

template: #: data.PRODUCT_NAME  # } }

Do I need to explicitly inject the detail template data source array value into the angular scope, it did not appear to be necessary  in the example?

 

[Alex]

Issue resolved by using http service for the detail template datasource:

 

    $scope.addChartsDS = function(dataItem) {
     $http.get("http://site.local/api/v1/index.php/products/chart/" + dataItem.chartno + "/20100101/20150515")
      .success(function(data) {
              $scope.chartData = angular.fromJson(data);
          })
          .error(function(data,status) {
              console.log(data);
          })
      ;
      return $scope.chartData;

and

for in the detailGridOptions:

 dataSource: $scope.addChartsDS(dataItem),