AngularJS 1.4.x

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div id="plunker-include">
      <h3>ng-include</h3>
      Applies: {{applies}}
      Digests: {{digests}}
      <div ng-include="'my-template.html'"></div>
    </div>
    <div id="plunker-url">
      <h3>Component with templateUrl</h3>
      Applies: {{applies}}
      Digests: {{digests}}
      <my-component-url></my-component-url>
    </div>
    <div id="plunker-template">
      <h3>Component with template</h3>
      Applies: {{applies}}
      Digests: {{digests}}
      <my-component-template></my-component-template>
    </div>
    
  </body>

</html>


my-component-url {
  display: block;
}

my-component-template {
  display: block;
}

(function () {
  function wrapDigest ($rootScope) {
    $rootScope.applies = 0;
    $rootScope.digests = 0;
    var originalApply = $rootScope.$apply;
    var originalDigest = $rootScope.$digest;
    $rootScope.$apply = function () {
      $rootScope.applies++;
      originalApply.apply(this, arguments);
    }
    $rootScope.$digest = function () {
      $rootScope.digests++;
      originalDigest.apply(this, arguments);
    }
  }
  
  var app1 = angular.module('plunker-include', []);
  app1.run(wrapDigest);
  angular.element(document).ready(function () {
    angular.bootstrap(document.querySelector('#plunker-include'), ['plunker-include']);
  });
  
  var app2 = angular.module('plunker-url', []);
  app2.run(wrapDigest);
  angular.element(document).ready(function () {
    angular.bootstrap(document.querySelector('#plunker-url'), ['plunker-url']);
  });
  
  var app3 = angular.module('plunker-template', []);
  app3.run(wrapDigest);
  angular.element(document).ready(function () {
    angular.bootstrap(document.querySelector('#plunker-template'), ['plunker-template']);
  });
  
  app2.directive('myComponentUrl', function () {
    return {
      templateUrl: 'my-template.html'
    }
  });
  
  app3.directive('myComponentTemplate', function () {
    return {
      template: 'Hello'
    }
  })

})();

Hello