JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="myApp">
<div ng-controller="PipelineController">
<span>Value sent will be: 123 street</span><br />
<button ng-click="startPipeLineAddressCheck('123 street');">FIRE</button>
</div>
<div ng-controller="PipelineController">
broadcast value: <br />
<span ng-model="lookupAddress" ></span>
</div>
</div>
JavaScript
// in app.js
var appRoot = angular.module('myApp', ['angularStart.services']);
//in services.js
var angularStartServices = angular.module('angularStart.services');
angularStartServices.service('AddressBroadcastService', ['$rootscope', function ($rootScope) {
this.lookupAddress = '';
this.prepForBroadcast = function (address) {
this.lookupAddress = 'passed thru service' + address;
this.broadcastItem();
};
this.broadcastItem = function () {
$rootScope.$broadcast('addressLookupBroadcast');
};
}]);
//in controllers/pipeline.js
appRoot.controller('PipelineController', ["$scope", "$location", "$resource", "AddressBroadcastService", function ($scope, $location, $resource, AddressBroadcastService) {
$scope.startPipeLineAddressCheck = function (address) {
alert('in pipeline ctrl');
AddressBroadcastService.prepForBroadcast(address);
};
$scope.$on('addressLookupBroadcast', function() {
$scope.lookupAddress = AddressBroadcastService.lookupAddress;
});
}]);