javascript - Angular app throws error -

javascript - Angular app throws error -

my code this

<div ng-app='myapp' ng-controller="mainctrl"> <div ng-repeat="prdelement in pacakageelement track $index" class="package-grid"> <div style="border: 1px solid; padding-bottom: 10px; padding-top: 10px"> <input placeholder="product code" /> <input placeholder="dimension" /> </div> <table class="hovertable"> <thead> <tr> <th>line #</th> <th>itcls</th> <th>item #</th> <th>line quantity#</th> <th>ship quantity</th> <th>pickquantity</th> <th>quantity in plt</th> <th>allready packed</th> </tr> </thead> <tbody> <tr ng-repeat="data in prdelement.data" ng-init="data.newquantity = data.quantity"> <td>{{data.itemid}}</td> <td>{{data.itcls}}</td> <td>{{data.itemid}}</td> <td>line quantity#</td> <td>ship quantity</td> <td>pickquantity</td> <td> <input type="text" ng-model="data.newquantity" placeholder="quantity" required=required /> </td> <td>allready packed</td> </tr> <tr> <td width="100%" colspan="4"> <button ng-show="prdelement.show" ng-click="newpackageitem( prdelement,$event)">next pallet</button> </td> <td width="100%" colspan="4"> <button ng-show="prdelement.show">remove pallet</button> </td> </tr> </tbody> </table> </div> (function () { angular.module('myapp', []).controller('mainctrl', function ($scope) { var counter = 0; $scope.pacakageelement = [{ name: counter, show: true, data: [{ name: 'item 1', itemid: '284307', itemcode: '', description: 'bicycle parts - frame', quantity: '100', handlingunit: 'ctn', weight: '613.04', class: '', lenght: '102', width: '42', height: '61', flag: 'p' }, { name: 'item 2', itemid: '284308', itemcode: '', description: 'bicycle parts - fork', quantity: '200', handlingunit: 'ctn', weight: '242.99', class: '', lenght: '75', width: '34', height: '18', flag: 'p' }] }]; $scope.newpackageitem = function (packageelement, $event) { var npackageelement = {}; angular.copy(packageelement, npackageelement); counter++; packageelement.show = false; npackageelement.name = counter; angular.foreach(npackageelement.data, function (row) { if (row.quantity != row.newquantity || row.quantity != 0) { row.quantity = row.quantity - row.newquantity; } }); $scope.packageelement.push(npackageelement); }; }); }());

here trying duplicate first dataset , calculations on it. works fine except function newpackageitem. function lone throws error

typeerror: cannot read property 'push' of undefined @ scope.$scope.newpackageitem

fiddle

you misspelled property "packageelement" "pacakageelement". alter instances utilize "packageelement" , should work.

javascript angularjs