To simplify it, here is a brief snippet with comments for better understanding.

A common module can be created to share data across modules in two simple steps:

1. Add the common module as a dependency
2. Inject the corresponding provider into the controller of the respective module

angular.module('commonAppData', []).factory('AppData',function(){
var a,b,c;
  a=1;
  return{
    a:a,
    b:b,
    c:c
  }
})

angular.module('list', ['commonAppData']).controller('listController', ListController);
var app = angular.module('myapp', ['list','commonAppData']).controller('appController', AppController);

function AppController(AppData) {
  //assigning a variable
  AppData.a=100;
  
  this.name = "Misae";
  this.fetch = function() {
    console.log("feching");
    //change ListController list
    //do something else
  }
}

function ListController(AppData) {
  //Using the data sent by App Controller
  this.variableA=AppData.a;
  
  this.list = [1, 2, 3];
  this.revert = function() {
    this.list.reverse();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="app" ng-app="myapp" ng-controller="appController as App">

  <div class="filters">
    Name:
    <input type="text" ng-model="App.name" />
    <button ng-click="App.fetch()">Fetch</button>
  </div>

  <div class="list" ng-controller="listController as List">
    <b>Shared variable : {{List.variableA}}</b>
    <br>
    <button ng-click="List.revert()">Revert</button>
    <ul>
      <li ng-repeat="item in List.list">{{item}}</li>
    </ul>
  </div>

</div>

When dealing with objects across multiple controllers, there are a couple of approaches you can take.

1. Leveraging Angular's $rootScope

One option is to store your object in the $rootScope, allowing it to be accessed by every controller using Angular's dependency injection. You can also monitor changes to the object by using $watch or $emit.

While using $rootScope is convenient, it might cause performance issues in larger applications.

2. Utilizing services

Another method is to use Angular's services to share objects. Instead of defining the object within a controller, you can define it inside a service and then inject that service into any controller to access its values throughout the application.

function AppController(listService) {
  // reference to the injected data
}

function ListController(listService) {
  // update data
}

There are numerous methods for transferring data from one module to another, with many individuals suggesting various approaches.

An optimal and organized method is to utilize a factory rather than cluttering the code with

$rootScope or using $emit or $broadcast or $controller

Simply inject the factory created in the main module and include child modules as dependencies in the main module. Then, inject the factory in the child modules to access its objects.

For an illustration, here's a sample example demonstrating how to effectively utilize a factory to share data across the application.

Let's develop a factory that can be employed throughout the application in all controllers to store and retrieve data.

The advantage of using a factory is the ability to create and initialize objects within it anywhere in the controllers, or set default values by initializing them within the factory itself.

Factory

app.factory('SharedData',['$http','$rootScope',function($http,$rootScope){

    var SharedData = {}; // creating a factory object...
    SharedData.appName ='My App';
    return SharedData;
}]);

Service

app.service('Auth', ['$http', '$q', 'SharedData', function($http, $q,SharedData) {
   this.getUser = function() {

            return $http.get('user.json')
              .then(function(response) {
                  this.user = response.data;
                  SharedData.userData = this.user; // integrating into the service and establishing an object in the factory object to retain user data..
                  return response.data;
              }, function(error) {
                  return $q.reject(error.data);
              });

    };

}]);

Controller

var app = angular.module("app", []);
app.controller("testController", ["$scope",'SharedData','Auth',
  function($scope,SharedData,Auth) {

    $scope.user ={};
   // fetching data through a service call using the service and accessing the shared data stored in the factory object ...
   var user = Auth.getUser().then(function(res){
       console.log(SharedData);
       $scope.user = SharedData.userData;// assigning to scope.
   });


  }]);

In HTML

<body ng-app='app'>
    <div class="media-list" ng-controller="testController">

       <pre> {{user | json}}</pre>

    </div>

</body>

Are you dealing with a parent-child dynamic or an unknown relationship? Or are you simply trying to avoid any complications altogether?

This article does a great job of breaking down the concept:

AngularJS offers services like $on, $emit, and $broadcast to facilitate event-driven communication between controllers.

When it comes to passing data from an inner controller (listController) to an outer controller (appController), using $emit is the way to go. It triggers an event name upwards in the scope hierarchy and notifies the registered $rootScope.

See a working example on Plunker : https://plnkr.co/edit/szf9jHvvOPLOvQc5sQI2?p=preview

Note that this Plunker may not perfectly match the exact requirements since the API response is unknown, but it demonstrates the problem statement.

Utilizing the publisher-subscriber pattern within AngularJS is a powerful tool.

In your ListController, remember to inject $rootScope and subscribe to an event like 'ingredients_data_received'.

$rootScope.$on('ingredients_data_received', function(ingredients) { prepare_recipe();});

In the AppController, don't forget to emit the event once the data is ready.

$rootScope.$emit('ingredients_data_received', ingredients);

While passing data through $rootScope works, it's not considered best practice. Consider creating a Service to manage the data instead.

I prefer utilizing angular resource along with a caching layer to store data across multiple controllers using a single method. This approach offers several advantages, such as providing every controller with the same access point to the data. However, it is important to consider that there are situations where fetching fresh data is necessary when transitioning between different parts of the website, making persisting http data less than ideal.

'use strict';
(function() {
    angular.module('customModule')
        .service('BookService', BookService);

    BookService.$inject = ['$resource'];

    function BookService($resource) {
        var BookResource = $resource('/books', {id: '@id'}, {
            getBooks: {
                method: 'GET',
                cache: true
            }
        });

        return {
            getBooks: getBooks
        };

        function getBooks(params) {
            if (!params) {
                params = {};
            }
            return BookResource.getBooks(params).$promise;
        }
    }
})();

When working in any controller:

BookService.getBooks().then(function(books) {
    // The data will be cached, ensuring that calling the method will consistently return the same dataset regardless of location
});

Angular services play a crucial role in sharing functionality among components. It is recommended to keep services simple and focused on a single responsibility or purpose. For example, you could consider implementing a store service that caches each API response within your application. This way, you won't need to make repeated requests every time.

I hope this suggestion proves helpful to you! ;)