Angularjs - Json in Localstorage does not 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’t use any server access, 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 save the update to localStorage and update the Colors Array then):

//Array a ser atualizado
$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);
    }
}
/*função que aplica o estilo nos elementos da view main.html
  Necessita utilizar $scope.status[$index] pois os índices do Array
  são os mesmos da variável status (não exibida neste código), que define
  o estado de cada elemento
*/
$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 style:

<!-- Através do 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 shown in the localStorage image below (note that the first record was updated to "Gray" by the form):

However, I cannot get localStorage to update the array, and consequently change the colors of View main.html. What is wrong?