<!doctype html>
<html ng-app="demo">
  <head>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<demo></demo>
    <ng-outlet></ng-outlet>
  </body>
</html>
'use strict'

function myController($templateRequest) {

  this.$onInit = function($compile, $templateCache, $templateRequest) {
    this.test = [{
      id: '1',
      name: 'California'
    }, {
      id: '2',
      name: 'Idaho'
    }, {
      id: '3',
      name: 'Oregon'
    }, {
      id: '4',
      name: 'Washington'
    }];

    this.content = 'Hello, World!';
  $templateRequest("template.html").then(function(html) {
      var el = $compile(html);
      console.log('xx'.el);
    });
  }
}


angular.module('demo', [
    // 3rd Party
  ])
  .component('demo', {
    templateUrl: 'template.html',
    controller: myController
  })
  .value('demo')

{{content}}
  
  
{{content}}