how to update all instances of the same controller

Question

I know how to share data between controllers using service but this case is different so please rethink the question.

I have something like this for the UI:

<jsp:include page="../home/Header.jsp" />
<div data-ng-view></div>
<jsp:include page="../home/Footer.jsp" />

Inside the ng-view, I instantiated a controller instance using "data-ng-controller="BuildController as ctrl". It will run this function that might take up to 2 hours. After it's completed, the buildCompletionMsg is updated and pop up a box saying it's completed.

   self.buildServers = function(servers, version) {
        BuildService.buildList(servers, version).then(
            function(data) {
                self.buildCompletionMsg = data;
                $('#confirmationModal').modal('show');
            },
            function(errResponse) {
                console.error("Error getting servers." + errResponse);
            }
        );
    };

The problem is that I want the modal to be in the Header.jsp file so doesn't matter which view the user is in, they would see the notification. Therefore in Header.jsp I have another controller instance using "data-ng-controller="BuildController as ctrl" and bind it using

<div data-ng-controller="BuildController as ctrl">
   <div class="modal fade" id="confirmationModal" role="dialog" aria-labelledby="confirmLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <h3>{{ ctrl.buildCompletionMsg }}</h3>
            </div>          
        </div>
    </div>
  </div>
</div>

As you can see, even if I do something like:

  self.buildCompletionMsg = BuildService.getCompletionMsg();

it would only update the ctrl instance of the ng-view page, and the one inside Header.jsp is still null.

How can I update all the instances of BuildController in different pages or just update the one in the Header.jsp file?

Answer 1

I found the answer to my own question. The solution is to to have an object reference or array in the service (it does not work for simple string) like this:

angular.module('buildModule').factory('BuildService', ['$http', '$q', function($http, $q) {

  var self = {};
  self.completionStatus = { data: "" };

then upon $http success update the completionStatus

self.status.data = response.data;

And in the controller, the variable is set directly to this object

  self.buildCompletionMsg = BuildService.completionStatus; 

This updates the variable {{ buildCompletionMsg }} on all the pages.