(Click here to view the plunkr example)
Delving into a common theme often encountered by beginners, I aim to provide a simplified response for your query. This is not an exhaustive tutorial but rather a concise summary to steer you in the right direction and encourage independent exploration. The solution primarily involves utilizing Angular directives, a robust pattern found in Angular 1.X (further enhanced in AJS 2.X). In this illustration, I introduce two directives - 'cf-get-data-button' and 'cf-show-data'. The former mimics a drop-down selection functionality (getData()), while the latter serves as a table where content gets dynamically updated (simulated as the latest UTC time). Additionally, I incorporate two crucial patterns: 1. a 'factory' pattern featuring a singleton service housing the ajax API, which is then 'injected' into the directives for accessibility; and 2. the utilization of async promises from ajax calls, concepts alluded to in your initial inquiry. Although I won't delve deep into these aspects here, exploring them further is recommended. Noteworthy is that in this scenario, the result of the simulated AJAX call ($timeout) becomes accessible only post the promise resolution.
Ultimately, you require an outer controller for your 'page', adhering to AJS' quasi MVC structure. However, each directive incorporates its own 'controller', aligning with the componentization and separation of concerns that you seek. The singleton service acts as the pivotal link for data management, facilitating data retrieval and consumption by both directives through injection. For instance, the simulated dropdown directive requests data, whereas the simulated table directive exhibits it (in UTC time). It's worth mentioning that directives can be customized in diverse ways, and the ones showcased here are relatively straightforward.
To commence, refer to the index.html snippet below (with the inclusion of 2 directives within the body and linked js scripts) and proceed from there. I've embedded comments within the js and html files for guidance. Don't hesitate to seek clarification if needed.
<!DOCTYPE html>
<html ng-app="Tutorial">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8e81889a838e9dc1859cafdec1dbc197">[email protected]</a>" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src=app.js></script>
<script src=mock_ajax_service.js></script>
<script src=getdatabuttondirective.js></script>
<script src=showdatadirective.js></script>
</head>
<body ng-controller="TutorialController">
<p>One UI directive triggers update on another UI directive</p>
<cf-get-data-button></cf-get-data-button>
<br>
<cf-show-data></cf-show-data>
</body>
</html>