Nested datatable directive with ng-repeat error

[ghost]

Hi!
I'm traying to make detail view in a datatable populated with a collection and ng-repeat TR.

The expanded child is showed when the user click on a row.

When the detail is expanded, the controller inject a ng-include that's render with the $render of Angular and inside it, i load other html with a "nested" datatable.

The problem is when I tray to populate the nested table with and other collecion/ng-repeat the console show me the next error:

Error: Expected expression in form of "item in collection[ track by id]" but got "{0}".
at Object.render (angular-datatables.js:880)
at angular-datatables.js:124
at processQueue (angular.js:16170)
at angular.js:16186
at Scope.$eval (angular.js:17444)
at Scope.$digest (angular.js:17257)
at Scope.$apply (angular.js:17552)
at done (angular.js:11697)
at completeRequest (angular.js:11903)
at XMLHttpRequest.requestLoaded (angular.js:11836)(anonymous function) @ angular.js:13708(anonymous function) @ angular.js:10347processQueue @ angular.js:16178(anonymous function) @ angular.js:16186$eval @ angular.js:17444$digest @ angular.js:17257$apply @ angular.js:17552done @ angular.js:11697completeRequest @ angular.js:11903requestLoaded @ angular.js:11836XMLHttpRequest.send (async)(anonymous function) @ angular.js:11881sendReq @ angular.js:11642serverRequest @ angular.js:11352processQueue @ angular.js:16170(anonymous function) @ angular.js:16186$eval @ angular.js:17444$digest @ angular.js:17257$apply @ angular.js:17552(anonymous function) @ angular.js:25627dispatch @ jquery.js:4737elemData.handle @ jquery.js:4549

My controller is like this:

(function () {
    'use strict';

    angular
            .module('app.datatable')
            .controller('DatatableController', DatatableController);

    function DatatableController($scope, $compile) {
        var vm = this;

        vm.verDetalle = verDetalle;

        function verDetalle() {
            var tr = $(event.target).closest('tr');
            var row = vm.dtInstance.DataTable.row(tr);

            if (!row.child.isShown()) {
                var detailInclude = '<div class="" ng-include="\'app/main/datatable/datatable.detail.html\'"></div>';
                var tplDetail = angular.element(detailInclude);
                $compile(tplDetail)($scope);

                var detailRow = row.child(tplDetail);
                detailRow.show();
                tr.addClass('shown');
            } else {
                row.child.hide();
                tr.removeClass('shown');
            }
        };

        vm.personas = [
            {
                nombre : "John",
                apellidos : "Doe",
                telefono : "123456789"
            }, {
                nombre : "John",
                apellidos : "Snow",
                telefono : "234567891"
            }, {
                nombre : "Odor",
                apellidos : "from Invernalia",
                telefono : "345678912"
            }
        ];

        vm.tareas = [
            {
                nombre : "Task 1",
                fecha : "18/07/2016",
                estado : "Sin iniciar"
            }, {
                nombre : "Task 2",
                fecha : "19/07/2016",
                estado : "Iniciada"
            }, {
                nombre : "Task 3",
                fecha : "18/07/2016",
                estado : "Iniciada"
            }, {
                nombre : "Task 4",
                fecha : "19/07/2016",
                estado : "Sin iniciar"
            }
        ];

        vm.dtInstance = {};
        vm.dtOptions = {
            dom : 'rt<"bottom"<"left"<"length"l>><"right"<"info"i><"pagination"p>>>',
            order : [0, 'asc'],
            pagingType : 'simple',
            autoWidth : false,
            lengthMenu : [10, 20, 30, 50, 100],
            pageLength : 10,
            //scrollY     : 'auto',
            responsive : true
        };

        $scope.$on('$viewContentLoaded', function () {

        });

    }

})();

My main html is this:

<div>
    <table datatable="ng" class="dataTable row-border hover nowrap stripe" dt-instance="vm.dtInstance"
               dt-options="vm.dtOptions">
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Apellidos</th>
                <th>Teléfono</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="persona in vm.personas"
                ng-click="vm.verDetalle($event)">
                <td>{{persona.nombre}}</td>
                <td>{{persona.apellidos}}</td>
                <td>{{persona.telefono}}</td>
            </tr>
        </tbody>
    </table>
</div>

And finally my included html is:

<div>
    <table datatable="ng" class="dataTable row-border hover nowrap stripe">
        <thead>
            <tr>
                <th>Tarea</th>
                <th>Fecha</th>
                <th>Estado</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{tarea.nombre}}</td>
                <td>{{tarea.fecha}}</td>
                <td>{{tarea.estado}}</td>
            </tr>
        </tbody>
    </table>
</div>

Can anyone helpme or tellme what i'm bad coding?

[l-lin]

What's the version of your angular-datatables? Is it related to #746?

[ghost]

My angular-datatables version is: 0.5.4, and i'm not using the debugInfoEnabled, so i think that isn't the same issue...

[l-lin]

Angular-datatables expects a ngRepeat directive. Except in your nested table, you did not have it.
Try putting an array of one element instead of directly the object.

On a side note, I don't think it's a wise idea to have nested tables.

[ghost]

Sorry! I forgot to put the iterator in the nested table. Thank you!

Having the nested table is a project requirement, to expand row info. But thanks for the note! ;-)