Angular Controller As

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
  <script src="app.js"></script>
  <script src="controllers.js"></script>
</head>

<body ng-app="app" ng-controller="MainController as vm">
  <h1>Controller as controller</h1>
  <div>
    <p>{{vm.message}}</p>
  </div>

  <div ng-controller="HomeController as home">
    <p>{{home.message}}</p>
    <button ng-click="mainController.click()">Click Me</button>
  </div>
  
  <div ng-controller="MainHomeController">
  
    <p>{{ vm.message}} </p>
    <p>{{ mainHome.message}}</p>
    <button ng-click="mainController.click()">Click Me</button>
  </div>
</body>

</html>

/* Styles go here */

(function() {
  angular.module("app.controllers", []);
  angular.module("app", ["app.controllers"]);
})();

(function() {
  angular.module("app.controllers")
    .controller("HomeController", [

      function() {
        this.message = "I know kung foo";
      }
    ]);


  angular.module("app.controllers")
    .controller("MainController", ["$log", MainController]);

  function MainController($log) {
    this.message = "I am main controller";
    this.$log = $log;
  }
  MainController.prototype.click = function() {
    this.$log.log("click");
  };


  var MainHomeController = function($controller) {};
  MainHomeController['$inject'] = ['$controller']
  angular.module("app.controllers")
    .controller("MainHomeController", MainHomeController]);






})();