Кендо UI ListView DataSource не работает

Question

<div ng-controller="patientSearchCtrl"> 
    <div kendo-list-view id="listView" k-data-source="source"> 
     <div class="product" k-template> 
      <h3>{{ dataItem.First_Name }}</h3> 
      <p>{{ dataItem.Last_Name }}</p> 
     </div> 
    </div> 
    <div kendo-pager k-data-source="source"></div> 
</div> 

<script src="../../Scripts/vendor/jquery-2.0.3.min.js"></script> 
<script src="../../Scripts/vendor/angular.js"></script> 
<script src="../../Scripts/vendor/kendo.core.min.js"></script> 
<script src="../../Scripts/vendor/kendo.angular.min.js"></script> 
<script src="../../Scripts/vendor/kendo.all.min.js"></script> 
<script src="alertApp.js"></script> 

<script> 
    angular.module("alertApp", ["kendo.directives"]) 
     .controller("patientSearchCtrl", function ($scope, $http) { 
      var product= null;//= [{ RowIndex: 1, PatientKey: 3, First_Name: "Barbara", Last_Name: "Wells", DOB: "07-29-1969" }]; 

      $http.get('http://localhost:1242/Api/PatientSearch?firstName=Bar&lastName=wells&pageIndex=0&pageSize=10&sortingOrder=FIRST_NAME'). 
       success(function (info, status, headers, config) {      
        product = info[0]["Table"]; 
        console.log(product); 
        $scope.source = new kendo.data.DataSource({ 
         data: info[0]["Table"], 
         pageSize: 21 
        }); 
       }). 
       error(function (data, status, headers, config) { 
        console.log('Error: ' + data); 
       });     
     }); 
</script> 

В коде выше console.log(product) дает выход:

[Object] 
    0: Object 
    First_Name: "Barbara" 
    Last_name: "Wells" 
    DOB: '07-29-1969' 

Но ListView не показывает каких-либо данных. Что мне здесь не хватает? Если я жестко кодирую данные, как после его работы, отлично.

$scope.source = new kendo.data.DataSource({ 
    data: [{ RowIndex: 1, PatientKey: 3, First_Name: "Barbara", Last_Name: "Wells", DOB: "07-29-1969" }], 
    pageSize: 21 
}); 

Answer 1

Попробуйте изменить

$scope.source = new kendo.data.DataSource({ 
       data: product, 
       pageSize: 1 
      }); 

в

$scope.source = { 
       data: product, 
       pageSize: 1 
      }; 

или

$scope.source = product; 

---

Чтобы обеспечить полный вариант s. Используйте ниже код

<div kendo-list-view k-options="source "></div> 

      $scope.source = { 
         dataSource: products, 
         template: "<div>#:First_Name#</div>" 
        };