Toggling Icons in Tabs in subheader

I want to be Toggling b/w two icons. For ex: When i clicked on grid icon it will show up grid data and hide List Icon.Again when i clicked on the same icon it will show up List data and hide grid Icon.

Here is my code in Tabs.html

 <div menu-toggle="right" ng-hide="data.grid = !data.grid">>

And I found http://codepen.io/mhartington/pen/zxpwbK2 But it's related to Buttons.

At the same time one needs to be show and one needs to be hide,for that u can use ng-show and ng-hide 

<div menu-toggle="right" ng-hide="data.grid = !data.grid">

for grid:

 <div class="" ng-hide="data.grid = !data.grid">


for icon:

<div class="" ng-show="data.grid = !data.grid">

From my understanding, I think this is what you are expecting.

   <ion-view view-title="Icon Sample">
      <ion-header-bar>
        <h1> Icon sample </h1>
      </ion-header-bar>
      <ion-content>
       <button class="button button-icon" ng-click="toggleIcon()">
        <i class="icon" ng-class="isToggled ? 'ion-ios-list-outline' : 'ion-grid'"></i>
        {{buttonText}}</button>
     </ion-content>
   </ion-view>

and the controller code as follows:

    .controller('sampleCtrl', function($scope){
     $scope.isToggled = true;
     $scope.buttonText = 'List';
     $scope.toggleIcon = function(){
     if($scope.isToggled){
       $scope.isToggled = false;
       $scope.buttonText ='Grid';
     }
    else{
     $scope.isToggled = true;
     $scope.buttonText ='List';
   }
 }
});

http://codepen.io/svswaminathan/pen/ByPKgp

Check out this codepen example to see if it fits your requirement.This has just the code to toggle the icon alternatively within a button. I believe you are able to load the data appropriately already