Can one AngularJS controller call another?

Technically, yes, one AngularJS controller can invoke functionality from another, but it’s generally not the recommended “Angular way.” Controllers in AngularJS are designed to be relatively isolated and focused on controlling a specific portion of your application’s data and logic. Directly calling one controller from another can lead to tight coupling and hinder maintainability. Below, we’ll explore how AngularJS handles controller interactions, why direct controller-to-controller calls are discouraged, and what the best-practice alternatives look like.

Why Direct Controller Calls Are Discouraged

Tight Coupling
If Controller A explicitly depends on Controller B, you introduce a tight coupling between components. Should you refactor or remove Controller B, Controller A may break, making it harder to maintain and test your application.
Separation of Concerns
AngularJS promotes the idea that controllers, services, and directives each have distinct responsibilities. Controllers should handle view-specific logic, while services should manage shared data or logic that can be reused across multiple controllers.
Testability Issues
When controllers call each other directly, you create additional dependencies that can complicate unit testing. Test setups become more fragile because each controller test may rely on the internal state of another controller.

How to Share Data or Logic the Right Way

Use a Service or Factory
The canonical AngularJS approach for sharing logic between controllers is to create a service, factory, or provider. Services hold the reusable methods and data that different controllers need to access.

// myService.js
angular.module('myApp')
  .factory('SharedService', function() {
    var serviceData = { count: 0 };
    
    return {
      getData: function() {
        return serviceData;
      },
      increment: function() {
        serviceData.count += 1;
      }
    };
  });

// controllerA.js
angular.module('myApp')
  .controller('ControllerA', function($scope, SharedService) {
    $scope.data = SharedService.getData();
    $scope.incrementCount = function() {
      SharedService.increment();
    };
  });

// controllerB.js
angular.module('myApp')
  .controller('ControllerB', function($scope, SharedService) {
    $scope.data = SharedService.getData();
  });

Here, ControllerA and ControllerB can both manipulate the same serviceData, without directly calling each other. Each controller remains independently testable and maintainable.

Use Events on $rootScope (Less Common)
AngularJS allows broadcasting and listening to events on $rootScope. You could have Controller A broadcast an event that Controller B listens for, but this can become unwieldy if overused. It’s best reserved for cross-cutting events (like logout notifications) rather than routine logic sharing.
```
// In ControllerA
$rootScope.$broadcast('someEvent', { message: 'Hello from A!' });

// In ControllerB
$rootScope.$on('someEvent', function(event, data) {
  console.log(data.message);  // "Hello from A!"
});
```
While events do provide a loose form of coupling, they can be harder to track and debug if you emit too many of them.
Shared Ancestor Scope (Limited to Parent-Child Controllers)
If you have nested controllers, a child controller can access properties or methods defined on the parent scope. However, this only works in a parent-child relationship and can still lead to tight coupling if you rely on the parent’s specific implementation.

Example: “Calling” Another Controller via a Shared Service

Let’s say you have two controllers handling parts of a dashboard: StatsController and NotificationsController. You want to increment a counter in StatsController whenever NotificationsController processes a new message.

Step 1: Create a Shared Service

angular.module('myApp')
  .factory('DashboardService', function() {
    var dashboardData = {
      notificationCount: 0
    };

    return {
      data: dashboardData,
      incrementNotification: function() {
        dashboardData.notificationCount++;
      }
    };
  });

Step 2: Use the Shared Service in Both Controllers

// statsController.js
angular.module('myApp')
  .controller('StatsController', function($scope, DashboardService) {
    $scope.dashboard = DashboardService.data;
  });

// notificationsController.js
angular.module('myApp')
  .controller('NotificationsController', function($scope, DashboardService) {
    $scope.processNewMessage = function(message) {
      // Do some processing
      DashboardService.incrementNotification();
    };
  });

Now, StatsController and NotificationsController remain unaware of each other but effectively “communicate” through DashboardService.

Beyond Controller Communication

As your application grows, you’ll need a solid handle on not just AngularJS specifics, but also on core JavaScript and broader architectural principles:

Grokking JavaScript Fundamentals
Understanding closures, prototypes, async, and other core JavaScript concepts will help you debug and optimize AngularJS code.
Grokking the System Design Interview
Larger AngularJS applications often need consideration for caching, load balancing, and backend scalability. System design knowledge becomes essential as you scale.

If you’re preparing for interviews or seeking personalized advice, check out Coding Mock Interviews or System Design Mock Interviews with ex-FAANG engineers. You can also explore the DesignGurus.io YouTube Channel for free tutorials on system design, coding patterns, and more.

Final Thoughts

While it’s technically possible for one AngularJS controller to call another (e.g., by using a shared scope reference or $controller service), it’s considered a bad practice. The AngularJS design philosophy encourages controllers to remain isolated and to share data or logic through services. By adhering to these design principles, you’ll build more modular, testable, and maintainable AngularJS applications—even as you scale your front-end architecture.

CONTRIBUTOR

TechGrind