AngularJS - sharing information between controllers, or altering architecture to not have to

Question

I am learning angular, and attempting to do so by writing an app.

I would like a page to appear as so (untested html, as I am figuring out architecture 1st):

Course.html:

<div ng-controller='courseController as course' >
    {{course.name}}
    <form>
        <input type='text' ng-model='course.desscription' />
    </form>
    Teachers:
    <div ng-include="'People.html'" ng-model="course.teachers as people"></div>

    Students:
    <div ng-include="'People.html'" ng-model="course.students as people"></div>
</div>

People.html:

<button type="button" ng-click="addParticipant()">Add new {{people.personType}}</button>
<table>
    <tbody>
        <tr ng-repeat="person in people track by person.Id">
            <td>{{person.FirstName + ' ' + person.LastName}}</td>
            <td><button type="button" ng-click="editParticipant()">edit</button></td>
            ...
</table>
<script type="text/ng-template" id="personModal.html">
    <div class="modal-title">{{operationDescription}}</div>
    <div class="modal-body">
       <div ng-view="'Person.html'">
    </div>            
</script>

addParticipant() & editParticipant() would display in a modal. personType is one of either 'teacher' or 'student'.operationDescription being one of add/edit teacher/student

Person.html:

<form ng-controller='personController as person'>
    <fieldset><legend></legend>
        FirstName:
        <input ng-model="person.FirstName" />
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>

[please feel free to comment on problems with the architecture or HTML above].

How do I achieve the information exchange between controllers (note this is done through a modal, not routing).

The personController need to have access to the persons id (if numeric, it will get the record from the personFactory method, otherwise it will create a new record). After successfully creating a person, the appropriate array (representing teachers or students) needs to have an item added with the new person's name and Id, and close the modal. How would I achieve this?

The teaching examples I can find the web either have a single controller or use routing. The single controller solution seems wrong because it lacks separation of concerns and re-usability (one could envisage wanting to create a new person from other pages within the app, and also potentially display the form outside a modal).

If I have inappropriate architecture, what are some other approaches?

Edit

In response to George Stocker - this is a question from a learner and an amateur about architecture and usage patterns. Given the usage case above - is a factory method really the way to achieve this? I have, in my learning so far, restricted factory methods to concerns regarding interacting with the data store - doesn't leaving this pattern confuse the architecture? In WPF MVVM, which is the closest I have come before to Angular, the parent viewmodel would have have instantiated the child viewmodel, injected the context and set the appropriate variables, and then observed the appropriate properties on this new viewmodel object without passing data via any service layer - quite neat, but this does not fit in with the Angular architecture I am learning/aware of (the equivalent of the answer you have linked to would have often been considered bad practice in WPF). I had looked around at passing data between angular controllers, but had come across some thoughts that this should be avoided. Having looked at the answers and comments, I am becoming convinced that passing data between controllers using either a factory or service method is indeed the angular way.

Thank you

Answer 1

Create a Service to Share Data

Take a look at services in angular to share data. Services are like "global namespaces" inside of angular. They can store/pull data, and they can be injected into multiple controllers to share data. Here's a quick example of a service in angular.

If it's small, you can use rootScope instead

And, it its a small thing (like userName), store it as a property on $rootScope. All of the scopes in your various controllers inherit from rootScope. If you inject it into your controller, then you can access it.

var myApp = angular.module('myApp');

myApp.controller('first', ['$scope', '$rootScope', function($scope, $rootScope) {
    $rootScope.userName = 'name';
}]);

Modal Issues

Depending on what you are using to create modal divs, you'll likely create those modal dialogs from within your parent controller.

If you're using a framework like angular-ui, then you will likely

(a) pass the person object to the modal form's controller as a resolve parameter and

(b) pass it back to your base controller in the .then() function for reintegration back into your dataset.

The whole open/ close modal dialog is well articulated in this post.