Kendo UI ListView DataSource is not working

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>

In above code console.log(product) gives output:

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

But ListView doesn't show any data. What I'm missing here? If I hardcode data like following it's work fine.

$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

Try changing

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

to

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

or

$scope.source = product;

---

To provide complete options. Use below code

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

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