angularjs - ng-options は、ページを更新するときに $localStorage 配列を無視しますか?

Question

Plunkr を作成しました。ボタンをクリックするとアイテムがプッシュされ、ボタンの色が赤に変わり、同じボタンをクリックするとボタンの色が緑に変わります。

問題は、保管が完璧に行われていることです。ボタン $localStorage.tableArray は、選択した ng-options では機能しません。

ページを更新すると、ボタンの色も ng-storage と ng-options で固定されたままになります。

1 つ目のプランカーは ng-storage を使用し、 2 つ目のプランカーは配列を使用し ています。助けてください。

 var app = angular.module('plunker', ["ngStorage"]);

 app.controller('MainCtrl', function($scope,$localStorage) {

     $scope.tablelist = [{"tablename":"t1"},{"tablename":"t2"}];

     if($localStorage.tableArray === undefined){
        $localStorage.tableArray = []
     }

     if($localStorage.tableslist === undefined){
         $localStorage.tableslist = []
     }

     $scope.getTable=function(table) {

         table.btnClass = table.btnClass == "btn-danger" ? "btn-success" : "btn-danger"
         var exists = false;

         angular.forEach($localStorage.tableArray, function (list,$index) {
            if ((list.tablename == table.tablename)) {
                console.log(list.tablename);
                console.log(table.tablename);
                exists = true;
                $localStorage.tableArray.splice($index,1);
                $scope.$storage=$localStorage.tableArray
                $localStorage.tableArray.splice($index,1);
                return false;
            }
        });

        if(!exists) {
            $localStorage.tableslist.push(table);
            $localStorage.tableArray = $localStorage.tableslist;
            console.log($localStorage.tableArray)
            table.color = "red"
        }
    } 
});