Change the view state according to the screen orientation

Hi, this might have been asked several times, and I did refer to another post that talked about it, but I’m still confused. My question, as the topic states, I want to change the state of the view corresponding to the screen orientation. If the screen is in portrait mode, I want to show card based view with more information, else if the screen is in landscape mode, I want to show card based view with less information.

This is somewhat a snippet of my attempt:
app.js

$scope.orientationTypeP = 1;
    $scope.orientationTypeL = 2;

    window.addEventListener("orientationchange",function(){
      if(window.orientation == 0)
      {
          $scope.getOrientationP();
      }

      if(window.orientation == -90)
      {
        $scope.getOrientationL();        
      }
    },false);

    $scope.getOrientationP = function(){
      return $scope.orientationTypeP;
    }

    $scope.getOrientationL = function(){
      return $scope.orientationTypeL;
    }

index.html

CustomerID: {{row.customerid}}
Customer: {{row.customer}}
OrderID: {{row.orderid}}
Ordername: {{row.ordername}}
Unit: {{row.unit}}
Internal: {{row.internalQty}}
External: {{row.externalQty}}
CustomerID: {{row.customerid}}
Customer: {{row.customer}}