title: AngularJS Print Hidden Div
body: <p>Recently a project has came around that I need to print a specific part of a page. Currently it is a dynamic accordion list that a user can expand and see results. The user has the option to print the contents of the expanded accordion, but only the one the the user has expanded. </p>
  
  <p>My code of the accorddion is like this:</p>
  
  <pre><code> &lt;accordion&gt;
    &lt;accordion-group class="test" ng-repeat="item in ItemsPW"&gt;
      &lt;uib-accordion-heading&gt;
        Header Stuff
      &lt;/accordion-heading&gt;
      &lt;div&gt;
        &lt;div class="col-sm-1 supply-item-print"&gt;
            &lt;button class="btn-print btn-success" type="submit"
               ng-click="printDiv(item.line);"&gt;
               &lt;span class="glyphicon glyphicon-print" aria-hidden="true"&gt;&lt;/span&gt;
             &lt;/button&gt;
         &lt;/div&gt;
      &lt;/div&gt;
    &lt;/accordion-group&gt;
   &lt;/accordion&gt;
  </code></pre>
  
  <p>This could have zero or several items to expand. Currently I have a hidden <code>div</code> that uses AngularJS to hide some of the content. Each accordion section is different. </p>
  
  <p>I have tried to print this two different ways:</p>
  
  <p><strong>Code 1:</strong></p>
  
  <pre><code>var restorePage = document.body.innerHTML;
  var printContent = document.getElementById('hiddenDiv').innerHTML;
  document.body.innerHTML = "&lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt;" +  printContent  + "&lt;/body&gt;";
  window.print();
  document.body.innerHTML = restorePage;
  </code></pre>
  
  <p>This works, however, this code rewrites the page contents and when I click back on the page, it refreshes the whole page. </p>
  
  <p><strong>Code 2</strong></p>
  
  <pre><code>var printContents = document.getElementById('hiddenDiv').innerHTML;
  var popupWin = window.open('', '_blank', 'width=1000,height=600');
  popupWin.document.open();
  popupWin.document.write('&lt;html&gt;&lt;head&gt;&lt;link href="public/css/style.css" ' +
      'rel="stylesheet"&gt;&lt;/head&gt;&lt;body&gt;' + printContents + '&lt;/html&gt;');
  popupWin.document.close();
  </code></pre>
  
  <p>This doesn't work so well with AngularJS. When I open the new window only the static content is sent over. So the content that is suppose to be hidden in the <code>div</code> is not hidden. </p>
  
  <p><strong>Goal</strong>
  Take the content of the hidden <code>div</code>, which uses AngularJS to hide content dynamically and print it. </p>
  
  <p><strong>HiddenDiv</strong></p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;Boxes&lt;/th&gt;
      &lt;th&gt;Bags&lt;/th&gt;
      &lt;th&gt;Supplies&lt;/th&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
      &lt;td&gt;&lt;span ng-hide="item.box1 == '0'"&gt;Box1&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;&lt;span ng-hide="item.box2 == '0'"&gt;Box2&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;&lt;span ng-hide="item.Bag1 == '0'"&gt;Bag1&lt;/span&gt;&lt;/td&gt;
      &lt;td&gt;&lt;span ng-hide="item.tape == '0'"&gt;Tape&lt;/span&gt;&lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The fields are hidden based on the values of the item, which will resemble what the accordion has.</p>