import {ScopeInjectedCtrl} from "ScopeInjectedCtrl";
import {PureClassCtrl} from "PureClassCtrl";

var app = angular.module('plunker', [])
  .controller('PureClassCtrl', PureClassCtrl)
  .controller('ScopeInjectedCtrl', ScopeInjectedCtrl);
  

app.controller('ScopeInjectedAnonymousCtrl', $scope => {
    $scope.msg1 = "Hi from ScopeInjectedAnonymousCtrl";

    $scope.updateMsg2 = function() {
      $scope.msg2 = "Hello! from ScopeInjectedAnonymousCtrl";
    };
  });
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script data-require="traceur@*" data-semver="0.0.0-20140302" src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
  <script data-require="traceur@*" data-semver="0.0.0-20140302" src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
  <script>
    traceur.options.experimental = true;
  </script>
  <script data-require="angular.js@1.2.x" src="//code.angularjs.org/1.3.0/angular.js" data-semver="1.3.0"></script>
  <script data-require="angular-resource@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-resource.js"></script>
</head>

<body style="padding:20px;">
  <div class="panel panel-warning" ng-controller="ScopeInjectedCtrl">
    <h4>Scope Injected Controller</h4>
    <h6>Value of msg1: {{msg1}}</h6>
    <button ng-click="updateMsg2()">Update msg2</button>
    <h6>Value of msg2: {{msg2}}</h6>
  </div>

  <div class="panel panel-info" ng-controller="ScopeInjectedAnonymousCtrl">
    <h4>Scope Injected Anonymous Controller</h4>
    <h6>Value of msg1: {{msg1}}</h6>
    <button ng-click="updateMsg2()">Update msg2</button>
    <h6>Value of msg2: {{msg2}}</h6>
  </div>

  <div class="panel panel-success" ng-controller="PureClassCtrl as pcc">
    <h4>Scope Injected Anonymous Controller</h4>
    <h6>Value of msg1: {{pcc.msg1}}</h6>
    <button ng-click="pcc.updateMsg2()">Update msg2</button>
    <h6>Value of msg2: {{pcc.msg2}}</h6>
  </div>

  <script>
    System.import("app").then(function(a) {

      angular.element(document).ready(function() {
        angular.bootstrap(document, ['plunker']);
      });
    });
  </script>
</body>

</html>
/* Put your css in here */

.panel {
  margin: 10px;
  padding:10px;
}
export let ScopeInjectedCtrl = function($scope) {
  $scope.msg1 = "Hi from ScopeInjectedCtrl";
  
  $scope.updateMsg2 = function() {
    $scope.msg2 = "Hello! from ScopeInjectedCtrl";
  }
}
export class PureClassCtrl {
  
  constructor() {
    this._msg1 = "Hi from PureClassCtrl";
    this._msg2 = "";
  }
  get msg1() {
    return this._msg1;
  }
  
  get msg2() {
    return this._msg2;
  }
  
  updateMsg2() {
    this._msg2 = "Hello! from PureClassCtrl";
  }
}