Push Values from a Service with RxJS

One alterantive to $rootScope.broadcast is to build a service with RxJS Extensions for Angular:

<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/rx/dist/rx.all.js"></script>
<script src="//unpkg.com/rx-angular/dist/rx.angular.js"></script>

var app = angular.module('myApp', ['rx']);

app.factory("DataService", function(rx) {
  var subject = new rx.Subject(); 
  var data = "Initial";
  
  return {
      set: function set(d){
        data = d;
        subject.onNext(d);
      },
      get: function get() {
        return data;
      },
      subscribe: function (o) {
         return subject.subscribe(o);
      }
  };
});

Then simply subscribe to the changes.

app.controller('displayCtrl', function(DataService) {
  var $ctrl = this;

  $ctrl.data = DataService.get();
  var subscription = DataService.subscribe(function onNext(d) {
      $ctrl.data = d;
  });

  this.$onDestroy = function() {
      subscription.dispose();
  };
});

Clients can subscribe to changes with DataService.subscribe and producers can push changes with DataService.set.

The DEMO on PLNKR.

Watchers are called everytime a $digest or an $apply cycle is done. It has more impact on your application than a local event like you are doing.

If you can use services to control communication between directives and/or controllers, it's better.

As far as i know, there's 4 ways to handle communication between controller and/or directives:

• Using a service (like you do)
• Rely on the $apply cycle with $watch
• Use the angular event system (with scope.$emit or scope.$broadcast)
• Be very dirty and use a global variable

Using a service is the best way. Especially if you handle a "one-to-one" communication.