title: Creating an Angular 2 app inside an Angular 1.6 container
body: <p>I am using AngularJS 1.6, and have a container on the page (<code>panel</code>) which has a component in it (<code>clock</code>).</p>
  
  <p>Is it possible to embed an Angular 2.0 app inside my AngularJS 1.6 container?</p>
  
  <p>Is this a scenario for ngUpgrade? I would like to avoid having to learn TypeScript just to demonstrate this integration.</p>
  
  <p>Controller.js</p>
  
  <pre><code>'use strict';
  var app = angular.module('app', []);
  
  app.directive('clock', function() {
    return {
      restrict: 'E',
      scope: {
        timezone: '@'
      },
      template: '&lt;div&gt;12:00 {{timezone}}&lt;/div&gt;'
    };
  });
  
  app.directive('panel', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {
        title: '@'
      },
      template: '&lt;div style="border: 3px solid #000000"&gt;' +
        '&lt;div class="alert-box"&gt;{{title}}&lt;/div&gt;' +
        '&lt;/div&gt;'
    };
  });
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
  
    &lt;script src="/bower_components/angular/angular.js"&gt;&lt;/script&gt;
    &lt;script src="js/controller.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div ng-app="app"&gt;
      &lt;panel title="Title for container"&gt;
        &lt;clock timezone="PST"&gt;&lt;/clock&gt;
      &lt;/panel&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>