如何在angularjs中组合两个控制器

Question

How to combine these two controllers into single controller class (make the two objects of the single controller class) and how use the same in html

var firstController = function ($scope)
{
  // Initialize the model variables
  $scope.firstName = "John";
  $scope.middleName = "Doe"
  $scope.lastName = "Smith";

  // Define utility functions
  $scope.getFullName = function ()
  {
    return $scope.firstName + " " + $scope.lastName;
  };
};

var secondController = function ($scope)
{
  // Initialize the model variables
  $scope.firstName = "Bob";
  $scope.middleName = "Al";
  $scope.lastName = "Smith";

  // Define utility functions
  $scope.getFullName = function ()
  {
    return $scope.firstName + " " + $scope.middleName + " " + $scope.lastName;
  };
};

Answer 1

You can create a component

angular.module('plunker').component('person',
{
  templateUrl: 'person.html',
  bindings: {
      firstName: '<',
      middleName: '<',
      lastName: '<'
    }
});

here is a working plunkr :

https://plnkr.co/edit/XJSk0ihDTX3pgsab81mO