Angular Controller Extend

Showing the extending controllers works and is useful and tidy

by Kearnan Kelly

HTML

<body ng-app="new">
    <div ng-controller="aCtrl">{{text1 + " " + text2}}</div>
    
    <div ng-controller="cCtrl">{{text1 + " " + text2}}</div>
    
    <div ng-controller="xCtrl">{{text1 + " " + text2}}</div>
</body>

JavaScript

var multiApp = angular.module('new', []);

// create a controller and extend it
 multiApp.controller('aCtrl', ['$scope', '$controller', function ($scope, $controller) {
     $scope.text1 = 'Hello';

     angular.extend(this, $controller('bCtrl', {
         $scope: $scope
     }));
 }]);



// create another controller and extend it also
 multiApp.controller('cCtrl', ['$scope', '$controller', function ($scope, $controller) {
     $scope.text1 = 'Runner\'s';

     angular.extend(this, $controller('bCtrl', {
         $scope: $scope
     }));
 }]);



// and create another controller and extend it also
 multiApp.controller('xCtrl', ['$scope', '$controller', function ($scope, $controller) {
     $scope.text1 = 'Mac';

     angular.extend(this, $controller('bCtrl', {
         $scope: $scope
     }));
 }]);



// muliple use controller
 multiApp.controller('bCtrl', ['$scope', function ($scope) {
     $scope.text2 = 'World!';
 }]);