ng-hide / ng-show not working from function called with ng-click

Question

I have two screens to be showing up in one area and I am using ng-hide / ng-show for the same !!

My code is :

inside controller

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

in my 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>

But although in the console, it is changing, it's not actually hiding and showing specific div !!

is there anything I am missing here?

Answer 1

Why are you storing the values as string?

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

shouldn't they be boolean?

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