title: Print a div using javascript in angularJS single page application
body: <p>I have a single page web application using angularJS. I need to print a div of certain page.
  I tried the following:</p>
  
  <p>The page contains few div (print.html)</p>
  
  <pre><code>&lt;div&gt;
    &lt;div&gt;
      Do not print
    &lt;/div&gt;
    &lt;div id="printable"&gt;
      Print this div
    &lt;/div&gt;
    &lt;button ng-click="printDiv('printableArea');"&gt;Print Div&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The controller has following script:</p>
  
  <pre><code>$scope.printDiv = function(divName) {
      var printContents = document.getElementById(divName).innerHTML;
      var originalContents = document.body.innerHTML;        
      document.body.innerHTML = printContents;
      window.print();
      document.body.innerHTML = originalContents;
  }
  </code></pre>
  
  <p>This code prints the desired div but there is a problem. 
  the statement <code>document.body.innerHTML = originalContents;</code> replaces the body of the whole application since it is a SPA. So when I refresh the page or click on print button again, the whole content of the page is erased.</p>