title: AngularJs stops working after pjax
body: <p>I am using both AngularJs and Pjax on the page. </p>
  
  <p>After a part of my page is reloaded with Pjax, Angularjs stops working there. </p>
  
  <p>Simple {{ 2+2 }} works everywhere except the part, reloaded with pjax.</p>
  
  <p>I have found, that the problem is in using $compile.</p>
  
  <p>I have tried different code snippets, but none of them worked for me.</p>
  
  <p>Neither this one</p>
  
  <pre><code>  angular.element(document).ready(function() {
       angular.bootstrap(document);
     });
  </code></pre>
  
  <p>nor this</p>
  
  <pre><code>// outside of angular...
    var ngRefresh = function() {
    var scope = angular.element("body").scope();
    var compile = angular.element("body").injector().get('$compile');
  
    compile($("body").contents())(scope); 
    scope.$apply();
  }
  
  // PJAX
  $('#page').on('pjax:success', function(e){
    ngRefresh();
  });
  </code></pre>
  
  <p>code snippets worked for me. Does anybody know a working solution? </p>
  
  <p><strong>UPD:</strong>
  After PSL's advice to change $("body") to $(document.body) the code started to work. But now everything is initialized from scratch and I loose my data (selected image in my example) after every pjax call. How can I avoid this?</p>
  
  <p>This is my js file:</p>
  
  <pre><code>app = angular.module("BlogImageApp", []);
  
  app.controller("BlogImageController", function($http, $scope){
  
  $scope.selectedImageId = null;
  $scope.selectedImageUrl = "";
  
  $scope.selectImage = function(image_id) {
      $scope.selectedImageId = image_id;
      var params = 'id='+image_id;
      $http.get('/blog/image/get-url-by-id?'+params).success(function(data){
          $scope.selectedImageUrl = data;
      });
  
  }
  });
  
  // registers the BlogImageApp in the view
  
  angular.bootstrap(document, ['BlogImageApp']);
  </code></pre>