ngMigrate - manual transclusion with Angular 1.x

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>modern Angular 1 playground</title>
    <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <collapsible-panel>
      <p>Hi there!</p>
      <button ng-click="internalToggle()">Close</button>
    </collapsible-panel>
  </body>

</html>

/* Put your css in here */

.panel {
  border-color: #ddd;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
  cursor: pointer;
}

.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
}

.panel-body {
  padding: 15px;
}

### Modern Angular 1.x Starter Plunker - Typescript

A simple plunker demonstrating a modern Angular 1.x usage:
- Uses SystemJS + TypeScript to compile on the fly
- Similar setup to Angular 2

For opening

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    'app': './src',
    'angular': 'npm:angular/angular.min.js',
    'typescript': 'npm:typescript@2.0.2/lib/typescript.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});

//main entry point
import * as angular from 'angular';

import { collapsiblePanelComponent } from './collapsiblePanel.component';

let appModule = 
  angular.module('app', [])
    .component('collapsiblePanel', collapsiblePanelComponent);

angular.bootstrap(document, [ appModule.name ]);

export const collapsiblePanelComponent = {
  transclude: true,
  template: `
    <div class="panel">
      <div class="panel-heading" ng-click="$ctrl.toggle()">
        <h3 class="panel-title">Click to expand/collapse</h3>
      </div>
      <div class="content">
      </div>
    </div>
  `,
  controller($element, $transclude) {
    let visible = false;
    let transclusionScope;
    let transcludeRegion = $element.find('.content');

    this.toggle = function() {
      if(!visible) {
        // expand now
        $transclude((transcludedEl, transScope) => {
          transcludeRegion.append(transcludedEl);
          transcludeRegion.addClass('panel-body');
          
          // pass function through
          transScope.internalToggle = this.toggle;
          
          // remember for later
          transclusionScope = transScope;
        });
        
        visible = true;
        
      } else {
        // collapse now
        
        // cleanup transclusion scope
        transclusionScope.$destroy();
        transclusionScope = null;
        
        // reset DOM container
        transcludeRegion.empty();
        transcludeRegion.removeClass('panel-body');
        
        visible = false;
      }
    }
  }
};