Print Modal Dialog Content

How to print the dialog content only without including the body content by ozkary.com

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div>
  <div ng-controller="app.invoice as ctrl" class="container text-center">
    <h4>Print Modal Content Demo</h4>
    <button class="btn btn-success" ng-click="ctrl.openInvoice()"> <i class="fa fa-print"></i> Print Modal Dialog</button>

  </div>
</div>
<script type="text/ng-template" id="invoice">
  <div id="print-content">
    <div class="modal-header">
      <h1>sample Invoice</h1>
    </div>
    <div class="modal-body">
      <table class="table table-condense">
        <caption>Products Invoice</caption>
        <thead>
          <tr class="bg-primary">
            <th>Name</th>
            <th>Quantity</th>
            <th>Item Cost</th>
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="item in ctrl.items">
            <td>{{item.name}}</td>
            <td>{{item.quantity}}</td>
            <td>{{item.unitCost | number:2}}</td>
            <td>{{item.total | number:2}}</td>
          </tr>
        </tbody>
      </table>

    </div>
    <div class="modal-footer">
      <div class="pull-left">
        <h5>&#9400; 2018</h5>
      </div>

      <div class="pull-right hidden-print">
        <button class="btn btn-primary" ng-click="ctrl.print()">Print</button>
        <button class="btn btn-primary" ng-click="$close()">OK</button>
      </div>
    </div>
  </div>
</script>

CSS

@media screen {
  #printSection {
    display: none;
  }
}

@media print {
  body * {
    visibility: hidden;
  }
  #printSection,
  #printSection * {
    visibility: visible;
  }
  #printSection {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

JavaScript

(function(angular) {
    'use strict';
    var appName = 'app';
    var app = angular.module(appName, ['ui.bootstrap']);
    app.controller('app.invoice', ['$scope', '$modal', invoiceCtrl]);
    app.controller('app.print', [printCtrl]);

    function invoiceCtrl($scope, $modal) {
      var ctrl = this;

      ctrl.openInvoice = function() {
        var modalInstance = $modal.open({
          templateUrl: 'invoice',
          size: 'lg',
          controller: 'app.print',
          controllerAs: 'ctrl'
        });
      }
    }

    function printCtrl() {
      var ctrl = this;
      ctrl.items = [{
        name: 'Baseballs',
        quantity: 50,
        unitCost: 5,
        total: 250
      }, {
        name: 'Baseball Bats',
        quantity: 2,
        unitCost: 150,
        total: 300
      }, {
        name: 'Baseball Bats',
        quantity: 2,
        unitCost: 150,
        total: 300
      }, {
        name: 'Baseball Bats',
        quantity: 2,
        unitCost: 150,
        total: 300
      }, {
        name: 'Baseball Bats',
        quantity: 2,
        unitCost: 150,
        total: 300
      }, {
        name: 'Baseball Bats',
        quantity: 2,
        unitCost: 150,
        total: 300
      }, {
        name: 'Baseball Bats',
        quantity: 2,
        unitCost: 150,
        total: 300
      }, {
        name: 'Baseball Bats',
        quantity: 2,
        unitCost: 150,
        total: 300
      }, {
        name: 'Baseball Bats',
        quantity: 2,
        unitCost: 150,
        total: 300
      }, {
        name: 'Baseball Bats',
        quantity: 2,
        unitCost: 150,
        total: 300
      }, {
        name: 'Baseball Bats',
        quantity: 2,
        unitCost: 150,
        total: 300
      }, {
        name: 'Baseball Bats',
        quantity: 2,
        unitCost: 150,
        total: 300
      }, {
        name: 'Baseball Bats',
        quantity: 2,
        unitCost: 150,
        total: 300
      }, {
        name: 'Baseball Bats',
...