I am attempting to set a local storage value to a $scope variable and utilize that $scope variable in ng-model to populate dropdowns. However, the code I have tried is not functioning as expected.
You can view the Plunker example here: https://plnkr.co/edit/Ile7ehzxB9PcoeTKk1B6?p=preview
It is crucial for me to initialize it from local storage only, since the data is exclusively received through local storage.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('appNew', []);
app.controller('controllerNew', function($scope) {
$scope.dataSet = ["A", "B", "C"];
localStorage['color'] = {"A":"Red","B":"Red","C":"Blue"};
var colorVar = localStorage['color'] || '';
$scope.selectColor = colorVar;
});
</script>
</head>
<body ng-app="appNew">
<table class="table TableOne" ng-controller="controllerNew">
<thead>
<tr>
<th>Serial</th>
<th>Data</th>
<th>Dropdown</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in dataSet">
<td>{{$index + 1}}</td>
<td>{{data}}</td>
<td>
<select ng-model="$parent.selectColor[data]">
<option value="">-- Select --</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>