title: Print Div Content Using AngularJs
body: <p>Inside AngularJs app, I want to inject generated content inside printDiv on certain on event. This <code>printDiv</code> is styled using and should be displayed on print only.</p>
  
  <p>Below is the code snippet:</p>
  
  <pre><code>@media print {    
      body &gt; #printDiv{
          display:block;
      }
      body &gt; #screenContent{
          display:none;
      }        
  }
  @media screen {
      body &gt; #printDiv {
          display: none;
      }
      body &gt; #printContent{
          display:block;
      }
  }
  </code></pre>
  
  <p>On certain event like (<code>ng-click</code>) like below example it calls function <code>GenerateContent()</code> on controller.</p>
  
  <pre><code>$scope.GenerateContent = function () {
     $("#divOne").text(data.FirstName);
     $("#divTwo").text(data.LastName);
     ...
       $scope.Print();
  }
  </code></pre>
  
  <p>Here, I tried to fetch previously injected content using plain JS and then printed using <code>window.print()</code> like below:</p>
  
  <pre><code>$scope.Print = function () {
      var content = document.getElementById("printContent").innerHTML;            
      document.getElementById('printDiv').innerHTML = content;
      window.print();
  }
  </code></pre>
  
  <p>And, finally on html page div structure is like below:</p>
  
  <pre><code>&lt;html&gt;
     &lt;body&gt;
         &lt;div id="screenContent"&gt;
             // html content for screen only
         &lt;/div&gt;
         &lt;div id="printDiv"&gt;&lt;/div&gt;
         &lt;div id="printContent"&gt;
            &lt;div id="divOne"&gt;&lt;/div&gt;
            &lt;div id="divTwo"&gt;&lt;/div&gt;
         &lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>On first attempt content is generated correctly and printed well. On every other attempt content is not injected, it always prints content generated on first attempt. </p>
  
  <p>Is this correct way of injecting and printing <code>div</code> using AngularJs SPA? How can my example be fixed to work in expected manner?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I tried with ng-bind instead of using jquery like this</p>
  
  <pre><code>&lt;div id="printContent" ng-controller="myController"&gt;
      &lt;div id="divOne" ng-bind="firstName"&gt;&lt;/div&gt;
      &lt;div id="divTwo" ng-bind="lastName"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and inside controller</p>
  
  <pre><code>$scope.firstName = data.FirstName;
  $scope.lastName = data.LastName;
  </code></pre>
  
  <p>but this doesnt inject anything into dom. </p>
  
  <p>I tried also with <code>ng-model</code> instead of <code>ng-bind</code> that also doesnt work. </p>
  
  <p><strong>Update 2</strong></p>
  
  <pre><code>myController
  (function () {
      "use strict";
      app.controller('myController',
         ....
          $http({
               method: 'POST',
               url: '/SomeService',
               data: ....,
             }).success(function (data) {
                $scope.firstName = data.FirstName;
                $scope.lastName = data.LastName;
            }
         });
      ...
  }());
  </code></pre>
  
  <p><strong>Update 3</strong></p>
  
  <pre><code>&lt;div id="printDiv"&gt;
     &lt;div id="printContent" ng-app="myApp" ng-controller="myController"&gt;
        &lt;div id="divOne" ng-bind="data.firstName"&gt;&lt;/div&gt;
        &lt;div id="divTwo" ng-bind="lastName"&gt;&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>myController code</p>
  
  <pre><code>angular.module('myApp', [])
  .controller('myController', function ($scope) {
     $scope.firstName: "Bob";
     $scope.lastName: "Smith";
     window.print();
  });
  </code></pre>
  
  <p>I'm calling window.print to print content inside printDiv where elements are binded to controller properties, yet this not working. When I look inside firebug content is not binded at all (html structure looks ok with ng-bing, but there is no actual content binded to that element).</p>
  
  <p>What I'm doing wrong here?</p>