ng-hide/ng-showがng-clickで呼び出された関数から機能しない

Question

1つの領域に2つの画面が表示されていますが、同じng-hide/ng-showを使用しています。

私のコードは次のとおりです。私のHTML内のコントローラ

$scope.grid1show = 'true' // intially this grid will shown on page load 
    $scope.grid2show = 'false' // Intially this grid is hide on page load 

    // Function 

    $scope.showGrid = function(){  
     $scope.grid1show = 'false'; 
     $scope.grid2show = 'true'; 
     console.log ("==after==" +$scope.grid1show); 
     console.log ("===after==="+ $scope.grid2show); 
    }; 

内部

<div ng-show="grid1show"> Shown this div initially 
    <span ng-click="showGrid2()">Click for grid2</span> // IT should fire function which should show grid2 and hide grid1 
</div> 

<div ng-show="grid2show"> Hide this div intially </div> 

しかしコンソールで、それが変化しているものの、それが実際に隠し、特定のdivを示すありません！ ！

ここには何かがありますか？

Answer 1

なぜ値を文字列として保存していますか？

$scope.grid1show = 'false'; 
$scope.grid2show = 'true'; 

ブール値ではありませんか？

$scope.grid1show = false; 
$scope.grid2show = true;