Changing ui-views from other ui-views with Angular UI-router - html

Question

I have a page with 2 ui-views, the top view has a form and some controls and the bottom view will be changed by the top view, but defaults to displaying a few tables.
I decided to try and do this initial page all in one state, and I am wondering if this is the correct way in this case. The state is called "tracker" and has the views with content as described above. When the user clicks a button in the top view, I want the bottom view to display alternate content (e.g. a map).
I can figure out how to change state "tracker" (views loaded with "controls.html" and "content.html") to a complete second state ("controls.html" and "map.html").
What I'm confused about is how would I change only the bottom view content#tracker between "contact.html" and "map.html" based on the button state in the top view.
The router is:
(function() {
'use strict';
angular.module('pb.tracker').config(function($stateProvider) {
$stateProvider.state('tracker', {
url: '/tracker',
controller: 'TrackerController as track',
data: {
pageTitle: 'Parcel Tracker',
access: 'public',
bodyClass: 'tracker'
},
views: {
'': {
templateUrl: 'modules/tracker/templates/tracker.html'
},
'controls#tracker': {
templateUrl: 'modules/tracker/templates/tracker-controls.html'
},
'content#tracker': {
templateUrl: 'modules/tracker/templates/tracker-details.html'
}
}
});
});
})();
and the base page's html is
<div class="container">
<div class="row spacer-top-xl">
<div class="col-md-12">
<div ui-view="controls"></div>
<div ui-view="content"></div>
</div>
</div>
</div>

Answer 1

One way out is using $broadcast and $on :
From the top view controller..
$scope.sendBroadcast = function() {
$rootScope.$broadcast('myAction');
}
and from the bottom view controller
$scope.$on('myAction', function() {
//Message received
});
another option may be using a service and $watch on a particular value for change.