title: AngularJs - RXJS Observable unsubscribe
body: <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>