<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//code.angularjs.org/1.3.1/angular.js" data-semver="1.3.1" data-require="angular.js@1.3.1"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="c1">
    <p>Angularjs with ajax DOM replacement</p>
    <hr />
    <div id="dest" >
      <p>Original Content</p>
      <p>Some data</p>
      <ul>
        <li ng-repeat="i in items">{{i.name}}</li>
      </ul>
    </div>
    
    <div>
      <div>
        <button onclick="APP.replace();">replace</button>
        <button ng-click="addRand()">add</button>
      </div>
    </div>
    
  </body>

</html>

// Code goes here

var a = angular.module('app', []);
var APP = APP || {};

APP.replace = function() {
  var $dest = $('#dest');
  $dest.load('replace.html', function() {
      $dest.scope().compileDOM($dest);
  });
};


a.controller('c1', function($scope, $compile) {
  $scope.items = [ { name: 'item 1' }, { name: 'item 2' }];
  $scope.compileDOM = function($el) {
    ($compile($el))($scope);
    $scope.$apply();
  };
  $scope.addRand = function() {
    $scope.items.push( { name: 'item ' + (new Date().getTime())});
  };
});
/* Styles go here */



<p>Replaced Content</p>

<p>Specific data</p>
<ul>
  <li ng-repeat="i in items"><b ng-bind="i.name"></b></li>
</ul>