AngularJs - RXJS Observable unsubscribe
<p>I have setup an RXJS observable. I have two components which subscribe to a subject in service factory. How do I unsubscribe a selected component to the subject so that a button is pressed it stops listening to the subject broadcast?</p>

<p>See my jsfiddle <a href="https://jsfiddle.net/bkarv/0maek0qr/" rel="noreferrer">Unsubscribe App</a></p>

<p>My code:</p>

<pre><code>&lt;div ng-app="myApp" ng-controller="mainCtrl"&gt;

  &lt;script type="text/ng-template" id="/boxa"&gt;
  BoxA - Message Listener: &lt;/br&gt;
  &lt;strong&gt;{{boxA.msg}}&lt;/strong&gt;&lt;/br&gt;
  &lt;md-button ng-click='boxA.unsubcribe()' class='md-warn'&gt;Unsubscribe A&lt;/md-button&gt;
  &lt;/script&gt;
  &lt;script type="text/ng-template" id="/boxb"&gt;
    BoxB - Message Listener: &lt;/br&gt;
  &lt;strong&gt;{{boxB.msg}}&lt;/strong&gt;&lt;/br&gt;
  &lt;md-button ng-click='boxB.unsubcribe()' class='md-warn'&gt;Unsubscribe B&lt;/md-button&gt;
 &lt;/script&gt;

  &lt;md-content class='md-padding'&gt;
    &lt;h3&gt;
      {{name}}
    &lt;/h3&gt;
    &lt;label&gt;Enter Text To Broadcast&lt;/label&gt;
    &lt;input ng-model='msg'/&gt;&lt;/br&gt;
    &lt;md-button class='md-primary' ng-click='broadcastFn()'&gt;Broadcast&lt;/md-button&gt;&lt;/br&gt;
    &lt;h4&gt;
    Components
    &lt;/h4&gt;
    &lt;box-a&gt;&lt;/box-a&gt;&lt;/br&gt;
    &lt;box-b&gt;&lt;/box-b&gt;
  &lt;/md-content&gt;

&lt;/div&gt;&lt;!--end app--&gt;


var app = angular.module('myApp', ['ngMaterial']);
app.controller('mainCtrl', function($scope,msgService) {

   $scope.name = "Observer App Example";
   $scope.msg = 'Message';
   $scope.broadcastFn = function(){
        msgService.broadcast($scope.msg);
   }   
});

app.component("boxA",  {
      bindings: {},
      controller: function(msgService) {
        var boxA = this;
        boxA.msgService = msgService;            
        boxA.msg = '';
        boxA.msgService.subscribe(function(obj) { 
            console.log('Listerner A');
          boxA.msg = obj;
                });
        boxA.unsubscribe=function(){

        };

      },
      controllerAs: 'boxA',
      templateUrl: "/boxa"
})
app.component("boxB",  {
      bindings: {},
      controller: function(msgService) {
        var boxB = this;
        boxB.msgService = msgService;            
        boxB.msg = '';
        boxB.msgService.subscribe(function(obj) { 
            console.log('Listerner B');
          boxB.msg = obj;
                });

        boxB.unsubscribe=function(){

        };
      },
      controllerAs: 'boxB',
      templateUrl: "/boxb"
})

app.factory('msgService', ['$http', function($http){
    var msgSubject = new Rx.ReplaySubject();
    return{
        subscribe:function(subscription){
            msgSubject.subscribe(subscription);
        },
        broadcast:function(msg){
        console.log('success');
            msgSubject.onNext(msg);
        }
    }   
}])
</code></pre>