Angular Controller inheritance

by Massimiliano Sartoretto

HTML

<body ng-app="myApp">
  <div ng-controller='baseController as vm' ng-cloak>
    <h1> {{ vm.message }} </h1>
  </div>
    <div ng-controller='childController as vm' ng-cloak>
    <h1> {{ vm.message }} </h1>
  </div>
</body>

JavaScript

angular
	.module('myApp', [])
  .controller('baseController', baseCtrl)
  .controller('childController', childCtrl);

  function baseCtrl() {
	  var vm = this;
    vm.message = 'Base controller!';

		// Shared logic here
  }
  
  childCtrl.$inject = ['$controller'];
  function childCtrl($controller) {
    var vm = this;
    vm = angular.extend(this, $controller('baseController'));
    
    // Ovverride base scope
    vm.message = 'Child controller!';
  }