AngularJS - Json with LocalStorage doesn't update Array

Question

I have a form in a View that should update the "color" property of an Array. This Array colors has 5 objects, each serving to set the color of an element of another View (so the option to use localStorage, since I can not use any access to the server, like $http).

The form view (settings.html)

  <form name="colorform" class="row col-md-offset-1" ng-submit="update(key)">
      <div class="col-md-6">
          <div class="form-group">
              <label>Color A (Tiles)</label>
              <input name="main" ng-model="colors[0].color" class="form-control">    
          </div>
          <div class="form-group">
              <label>Color B (Blocked Tiles)</label>
              <input name="locker" ng-model="colors[1].color" class="form-control">    
          </div>
          <div class="form-group">
              <label>Color C (Path)</label>
              <input name="path" ng-model="colors[2].color" class="form-control">    
          </div>
          <div class="form-group">
              <label>Color D (Start Point)</label>
              <input name="path" ng-model="colors[3].color" class="form-control">    
          </div>
          <div class="form-group">
              <label>Color E (End Point)</label>
              <input name="path" ng-model="colors[4].color" class="form-control">    
          </div>
          <button type="submit" class="btn btn-primary">
              Update
          </button>
          <a href="#/" class="btn btn-primary">Back</a>
          <hr>
      </div>
  </form>

Excerpt from BoardController.js (which should store the update in the localStorage and update the Array colors then):

//Array to be updated
$scope.colors = [
    {name: "main", color: "white"},
    {name: "locker", color: "black"},
    {name: "path", color: "yellow"}, 
    {name: "start", color: "green"},
    {name: "end", color: "blue"},
];

//localStorage

$scope.update = function (key) {
    localStorage.setItem( 'colors', angular.toJson( $scope.colors, '[]' ) );
    console.log(JSON);

    var newColors = angular.fromJson( localStorage.getItem( 'colors' ) );
    for (var i = 0; i < newColors.length; i++) {
        $scope.colors == $scope.colors;
        $scope.colors = newColors[i];

        console.log($scope.colors);
    }
}
/*function that applies the style in the elements of the view main.html
  It needs to use $scope.status[$index] since Array indexes
  are the same as the status variable (not shown in this code), which 
  defines the status of each element
*/
$scope.style = function ($index) {       
    return {
        "height" : tileHeight + 'px',
        "width" : tileWidth + 'px',
        "border" : "1px solid #CCC",
        "background-color": $scope.colors[$scope.status[$index]].color,
        "float": "left"
    }
}

And in main.html, using the ng-style:

<div ng-repeat="tile in getNumber(tiles) track by $index" 
     ng-click="changeToggle($index)" ng-init="initToggle($index)" 
     ng-model="status[$index]" ng-style="style($index)"></div>
</div>

The data is being stored correctly, as it shows the image of the localStorage below (note that the first record has been updated to "gray" by the form):

However, I can't update the array with the localStorage, and consequently change the colors of View main.html. What is wrong?

EDIT 1:

I try to change the update function, like this:

$scope.update = function (key) {
    localStorage.setItem( 'colors', angular.toJson( $scope.colors, [] ) );
    var newColors = angular.fromJson( localStorage.getItem( 'colors' ) );
    console.log(newColors);
    $scope.colors = newColors.slice(0);
    console.log($scope.colors);
    // for (var i = 0; i < newColors.length; i++) {
    //     $scope.colors.push(newColors);
    //     console.log(newColors);
    // }

}

I commented the loop, and now both Arrays have the same values in console. But I can't update yet... Maybe is the problem in the $scope.style function?

EDIT 2:

JSFiddle

EDIT 3

Question: What if I do another structure, where each View would have its own Controller, and a Service to get and set all data between them? Is it feasible?

Answer 1

The update function logic was wrong. In fact, when the user clicks on "Update" button, the localStorage data should be updated (or created), with the new colors. But the localStorage.getItem and for loop don't belong to the update action!

So, for the purpose of this need, the code that worked was only write the localStorage.getItem and for loop outside of the $scope.update function, like this:

$scope.update = function () {
    localStorage.setItem( 'colors', angular.toJson( $scope.colors, '[]' ) ); 
};

var newColors = angular.fromJson( localStorage.getItem( 'colors' ) );
for (var i = 0; i < newColors.length; i++) {
    $scope.colors[i] = newColors[i];
}