Issue binding XML sent via Web API

I poached most of the code from here, http://www.igniteui.com/data-source/xml-binding, with slight modifications.

/exemel/index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../scripts/modernizr-2.6.2.js"></script>
    <script src="../scripts/jquery-1.10.2.min.js"></script>
    <script src="../scripts/jquery-ui.min.js"></script>
    <script src="../igniteui/js/infragistics.loader.js"></script>
</head>

<body>

    <table id="table" class="standard-grid">
        <thead>
            <tr>
                <th>
                    Email
                </th>
                <th>
                    Age
                </th>
                <th>
                    Name
                </th>
           </tr>
        </thead>
        <tbody></tbody>
    </table>
    <br />

    <script>
        $.ig.loader({
            scriptPath: '../igniteui/js/',
            cssPath: '../igniteui/css/',

            ////string representing which component resources are required
            resources: "igDataSource"
        });

        $(function () {
            //alert('k');

            // Renders the table
            var renderTable = function (success, error) {
                var template = "<tr><td>{Email}</td><td>{Age}</td><td>{Name}</td></tr>";
                if (success) {
                    $("#table tbody").empty();
                    $($.ig.tmpl(template, ds.dataView())).appendTo("#table tbody");
                } else {
                    alert(error);
                }
            }

            // The $.ig.DataSchema is used to define the schema of the data
            var xmlSchema = new $.ig.DataSchema("xml", {
                //searchField serves as the base node(s) for the XPaths
                searchField: "//Person",
                fields: [
                    { name: "Name", xpath: "./@Name" },
                    { name: "Email", xpath: "Details/@Email" },
                    { name: "Age", xpath: "Details/@Age" }
                ]
            });

            // service Url
            var url = "/api/exemel/5";

            // This code creates an $.ig.DataSource bound to oData service
            var ds = new $.ig.DataSource({
                type: "remoteUrl",
                callback: renderTable,
                dataSource: url,
                schema: xmlSchema,
                responseDataType: "xml",
                responseContentType: "application/xml; charset=utf-8"
            });

            // Binds to the underlying data
            ds.dataBind();
        });

    </script>

</body>

</html>

exemelcontroller.vb

' GET api/exemel/5
    Public Function GetExemel(ByVal id As Integer) As XmlDocument ' String
        'Return "value"
        Dim a As String = ""

        a = "<People>" + _
        "<Person Name=""Gustava Achong"">" + _
        "<Details Age=""42"" Email=""gachong@adventureworks.com"" />" + _
        "</Person>" + _
        "<Person Name=""Catherine Abel"">" + _
        "<Details Age=""27"" Email=""cabel@adventureworks.com"" />" + _
        "</Person>" + _
        "<Person Name=""Kim Abercrombie"">" + _
        "<Details Age=""33"" Email=""kabercrombie@adventureworks.com"" />" + _
        "</Person>" + _
        "</People>"

        Dim b As New XmlDocument
        b.LoadXml(a)

        Return b 'a
    End Function

Here's the Firebug Console after running: