Cannot store drag and drop items in localStorage in angularjs - angularjs

Question

Hello I am writing a simple aplication to asign tas to the user by using drag and drop option.
(By using angular-dragdrop.min.js file).
I can keep data in local storage but after refresh $$hashKey
automatically changed so even if array is in local storage of the browser so You cannot see item inside user box.
Link to github project
var App = angular.module('drag-and-drop', ['ngDragDrop']);
App.controller('oneCtrl', function($scope) {
$scope.list1 = [];
$scope.list2 = [];
$scope.list3 = [];
$scope.list5 = [
{ 'title': 'Item 1', 'drag': true },
{ 'title': 'Item 2', 'drag': true },
{ 'title': 'Item 3', 'drag': true },
{ 'title': 'Item 4', 'drag': true },
{ 'title': 'Item 5', 'drag': true },
{ 'title': 'Item 6', 'drag': true },
{ 'title': 'Item 7', 'drag': true },
{ 'title': 'Item 8', 'drag': true }
];
var mainList = $scope.list5;
var firstList = $scope.list1;
var secondList = $scope.list2;
var thirdList = $scope.list3;
$scope.doSomething = function () {
localStorage.setItem('mainList', JSON.stringify(mainList));
localStorage.setItem('firstList', JSON.stringify(firstList));
localStorage.setItem('secondList', JSON.stringify(secondList));
localStorage.setItem('thirdList', JSON.stringify(thirdList));
console.log(mainList);
console.log(firstList);
console.log(secondList);
console.log(thirdList);
};
if(localStorage.getItem('mainList')){
$scope.list5.push(JSON.parse(localStorage.getItem('mainList')));
console.log(mainList);
}
if(localStorage.getItem('firstList')){
$scope.list1.push(JSON.parse(localStorage.getItem('firstList')));
console.log(firstList);
}
if(localStorage.getItem('secondList')){
$scope.list2.push(JSON.parse(localStorage.getItem('secondList')));
console.log(secondList);
}
if(localStorage.getItem('thirdList')){
$scope.list3.push(JSON.parse(localStorage.getItem('thirdList')));
console.log(thirdList);
}
And part of index.html
<div class="main-content col-md-12 col-lg-12" ng-controller="oneCtrl">
<div class="btn btn-droppable" ng-repeat="item in list5" data-drop="true" ng-model='list5'
data-jqyoui-options="{accept:'.btn-draggable:not([ng-model=list5])'}"
jqyoui-droppable="{index: {{$index}}}">
<div class="btn btn-info btn-draggable" data-drag="{{item.drag}}"
data-jqyoui-options="{revert: 'invalid'}" ng-model="list5"
jqyoui-draggable="{index: {{$index}},placeholder:true,animate:true}" ng-hide="!item.title">
{{item.title}}
</div>
</div>
<div class="thumbnail" data-drop="true" ng-model='list2' data-jqyoui-options="optionsList2"
jqyoui-droppable="{multiple:true}">
<div class="caption">
<div class="btn btn-info btn-draggable" ng-repeat="item in list2"
ng-show="item.title" data-drag="{{item.drag}}"
data-jqyoui-options="{revert: 'invalid'}" ng-model="list2"
jqyoui-draggable="{index: {{$index}},animate:true}">{{item.title}}
</div>
</div>
</div>

Answer 1

Your issue is with JSON.parse and JSON.stringy.
You should use angular.toJson and angular.fromJson instead as it will strip out the $$hashKey
Example:
//equals to JSON.stringify
localStorage.setItem('mainList', angular.toJson(mainList));
//equals to JSON.parse
if(localStorage.getItem('mainList')){
$scope.list5.push(angular.fromJson(localStorage.getItem('mainList')));
console.log(mainList);
}
UPDATE
This is wrong, you are pushing array into an array so you are create an array of array. Whereas you want an array of objects.
if(localStorage.getItem('firstList')){
//This is what you are doing, this is wrong as this will create
// array of array
$scope.list1.push(angular.fromJson(localStorage.getItem('secondList')));
}
What you should be doing is this
if(localStorage.getItem('firstList')){
//this will assign the array stored in ls to the list1 var
$scope.list1 = angular.fromJson(localStorage.getItem('firstList'));
console.log(firstList);
}