Calling into or between controllers in AngularJS

Question

I have some fairly complicated logic in a bootstrap dialog which I've moved into its own controller for isolation.

There are times I want to launch the dialog or call a function in the controller based on some logic that occurs elsewhere in the app - in another controller, or a service. I've achieved this by adding an id to the ng-controller element then looking up the element by that id, and calling things off the .scope() of that controller. Essentially this:

In html:

<div id="modalController" ng-controller="modalController">

And in another service or controller:

angular.element("#modalController").scope().somefunction()

This seems pretty weird that I can't just get a controller by name. Is there a way to do this?

Answer 1

Create a service and bind the model to data maintained in that service. Make a change to the model within the service and it's made everywhere.

You could also create a service that provides a pubsub interface to the changes you need to make.

Yet another way to do it would be to have a single model representing the state of your system and modify that. Attach the relevant parts of that model to the scopes of each widget as necessary and you have a communication device built in.

It sounds like you are making a change in one place that should cause a change in another place. If that's the case, I'd argue having a service that updates all parts of the model correctly is the best way to go. Always imagine what you'd do if you added another widget that hangs off this functionality.