Angular Material switch between show and hide programmatically

Issue

Is it possible to switch between the attributes show and hide by button click (programmatically)? I have for example a card with a map and a list view. These are usually displayed side by side. On mobile devices, but is for the List view flex = 100 increases. The map is no longer displayed. The user should however have the possibility to switch between the two views. How I can do that?

My example tags:

<md-card flex-gt-xs="40" flex-xs="100">
 <list></list>
</md-card>

<md-button>toggle Views</md-button>

<md-card flex="60" hide-xs show-gt-xs >
  <leaflet height="40vh" ></leaflet>
</md-card>

Update:

Summary

I would like to have 2 columns that can be switched on mobile devices, and side by side on larger devices.

Solution

I have found the solution. $mdMedia does all the magic.

js:

 $scope.$watch(function () {
            return $mdMedia('sm');
        }, function (big) {
            $scope.screenIsSmall = $mdMedia('sm');
        });

View:

   <md-card flex="60" ng-hide="screenIsSmall&&!showMap" style="max-height: 40vh">
       <md-button ng-show="screenIsSmall" ng-click="showMap = !showMap">toggle</md-button>
       <leaflet height="40vh"></leaflet>
    </md-card>

Answered By - laren0815