Ng-repeat doesn't works with localStorage - angularjs

Question

Something weird is happening with my localStorage. Data is saved in my localStorage but is never displayed in ng-repeat. However, when the data is less than 2 items, in that case, it is displayed on the screen. When it is greater than 2 it is not shown. This is my controller code
$scope.saved = localStorage.getItem('todos');
if($scope.saved != null ) {
$scope.invoice = { items: JSON.parse($scope.saved) };
} else {
$scope.invoice = { `enter code here`
items : [{
qty: 10,
description: 'item',
cost: 9.95}]
};
}
And this is my addition code:
$scope.addItem = function(x) {
$scope.invoice.push({
qty: 1,
description: x.cakename,
cost: x.id
});
localStorage.clear();
localStorage.setItem('todos', JSON.stringify($scope.invoice));
};
This is table code:
<div>
<table class="table" style="margin-top:50px">
<tr>
<th>Name</th>
<th>Qty</th>
<th>Cost</th>
<th>Total</th>
<th></th>
</tr>
<tr ng-repeat="item in invoice">
<th>#{{ item.description }}</th>
<th>#{{ item.qty }}</th>
<th>#{{ item.cost }}</th>
<th>#{{ item.qty * item.cost }}</th>
<td>[<a href ng:click="removeItem($index)">X</a>]</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Total:</td>
<td> #{{ total() | currency }} </td>
</tr>
</table>
<a href="#/checkout" class="btn btn-danger">
Checkout <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
</a>
</div>
When there are only 2 items and I refresh, the screen shows,
Name Qty Cost Total
Black Forest 1 1 1 [X]
Berry 1 2 2 [X]
Total: $3.00
Checkout
otherwise, it shows
Name Qty Cost Total
Total: $7.00
As the total is 7.. The data is still there but not getting displayed.

Answer 1

You stringify the entire invoice object, but when you read it back from local storage, you parse it into an object with a different structure.
Try $scope.invoice = JSON.parse($scope.saved) instead.

Answer 2

I solved my question. It was because of the duplicate keys in the array. Duplicate keys are banned because AngularJS uses keys to associate DOM nodes with items. So adding this did the trick.
ng-repeat="item in invoice track by $index"
So stupid of me!