Angularjs ng hide/ng show无法从使用ng click调用的函数中工作

我有两个屏幕显示在一个区域中，我使用ng hide/ng show进行相同的操作

我的代码是：

内部控制器

  $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 );
   };

在我的HTML中

<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
单击以获取grid2//它应该启动函数，该函数应该显示grid2并隐藏grid1
把这个div隐藏起来

但是，尽管在控制台中，它正在改变，它实际上并没有隐藏和显示特定的div

---

这里缺少什么吗？

为什么要将值存储为字符串

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

它们不应该是布尔值吗

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