Nested ng-Repeat not working angularJS

Question

My code is like this

<table ng-app='myApp'>
    <thead>

    </thead>
    <tbody ng-controller="MainCtrl">
        <tr ng-repeat="prdElement in palletElement">
            <td>{{prdElement.name}}</td>
            <tr ng-repeat="data in prdElement.data">

                <td>
                    {{data.itemId}}
                </td>
                <td>
                    {{data.shipmentId}}
                </td>
                <td>
                    {{data.itemCode}}
                <td>
                    {{data.description}}
                </td>

                <td>
                    {{data.handlingUnit}}
                </td>
                <td>
                    {{data.weight}}
                </td>
                <td>
                    {{data.class}}
                </td>
                <td>
                    {{data.lenght}}
                </td>

                <td>
                    {{data.width}}
                </td>
                <td>
                    {{data.height}}
                </td>
                <td>
                    {{data.flag}}
                </td>

                <td>
                    <input type="text" ng-model="prdElement.quantity" placeholder="Code" required />
                </td>

            </tr>
            <tr>
                <td>
                    <button ng-click="newPalletItem(palletElement,$event)">Submit</button>
                </td>
            </tr>
         </tr>

        </tbody>

    </table>


(function () {
    angular.module('myApp', []).controller('MainCtrl', function ($scope) {

        var counter = 0;

        $scope.palletElement =
        [{
            name: 'Pallet 1',
            Data:[{
            name:'item 1' ,
            itemId: '284307',
            shipmentId: 'eb44f690-c97a-40e3-be2a-0449559e171a',
            itemCode: '',
            description: 'Bicycle parts - frame',
            quantity: '31',
            handlingUnit: 'CTN',
            weight: '613.04',
            class:'',
            lenght: '102',
            width: '42',
            height: '61',
            flag:'P'
        }, {
            name: 'item 2',
            itemId: '284308',
            shipmentId: 'eb44f690-c97a-40e3-be2a-0449559e171a',
            itemCode: '',
            description: 'Bicycle parts - fork',
            quantity: '22',
            handlingUnit: 'CTN',
            weight: '242.99',
            class: '',
            lenght: '75',
            width: '34',
            height: '18',
            flag: 'P'
        }]
        }]

    }
    });
}());

All looks okay to me, but not working, can any one point out what I am doing wrong?

Fiddle

Answer 1

Remove ng-controller="MainCtrl" from tbody and add it on table

Change prdElement.data To prdElement.Data and Try

See DEMO