How get ng-repeat functionality using Kendo Mobile UI DataSource

Question

The application in which I am working has different levels of data. Using AngularJS ng-repeat I could point to different levels of data and also could iterate through each data and bind to the view. That is something like this link (Here I have used Kendo Mobile UI and also AngularJS).

According to Telerik documentation "ng-repeat" should not be used as CSS styles while using Kendo widgets goes for a toss and also to update the model it gives a problem. To prevent this Kendo DataSource should be used to fetch the data from a JSON string or file

I tried the same app in the above link with Kendo DataSource, but I was able to fetch only 1st level of data from the JSON string. For the second and third level, if I specify the array position, I get only that data on the view something like this link (With Kendo DataSource and AngularJS).

So my question is, how to handle multiple levels of JSON Data of this sort

 [
    {
        "continentName": "Asia",
        "countries": [
            {
                "countryName": "India",
                "states": [
                  {
                    "stateName": "Sikkim"
                  },
                  {
                    "stateName": "Karnataka"
                  },
                  {
                    "stateName": "Kerla"
                  },
                ],
            },
            {
                "countryName": "China",
                "states": [
                  {
                    "stateName": "Jiangsu Province"
                  },
                  {
                    "stateName": "Heilongjiang Province"
                  },
                  {
                    "stateName": "Fujian Province"
                  },
                ],
            },
          ],
    },
        {
        "continentName": "Europe",
        "countries": [
            {
                "countryName": "Germany",
                "states": [
                  {
                    "stateName": "Berlin"
                  },
                  {
                    "stateName": "Hesse"
                  },
                  {
                    "stateName": "Rhineland-Palatinate"
                  },
                ],
            },
            {
                "countryName": "Denmark",
                "states": [
                  {
                    "stateName": "Hovedstaden"
                  },
                  {
                    "stateName": "Midtjylland"
                  },
                  {
                    "stateName": "Nordjylland"
                  },
                ],
            },
          ],
    },       

]

To fetch the data using Kendo DataSource

angular.module("app", ["kendo.directives"]).controller("MyCtrl", function ($scope) {
$scope.source = new kendo.data.DataSource({
    data: json,
    pageSize: 10
});
});

In the view section that is html file

<div ng-app="app" ng-controller="MyCtrl">
        <div kendo-list-view k-data-source="source">
            <div k-template>

                <ul class="ulClass">
                    <h3>{{dataItem.continentName}}</h3>
                    <li>
                        {{dataItem.countries[0].countryName}}
                        <ul>
                            <li>{{dataItem.countries[0].states[0].stateName}}</li>
                        </ul>
                    </li>
                </ul>

            </div>
        </div>
    </div>

So the problem is how to handle multiple level JSON data and bind to view or templates using Kendo DataSource?