title: Rxjs - Subscribing to interdependent observables
body: <p>I am learning angular 2 and rxjs. I have 3 variables, A B C.</p>
  
  <ul>
  <li>B depends on the value of A</li>
  <li>C depends on the value of A and B</li>
  </ul>
  
  <p>I am trying to setup up the observables such that: When A is updated, B and C will be auto updated. When B is updated, C will be auto updated. I tried two setups but they are not satisfactory.</p>
  
  <ul>
  <li>First setup: B subscribes observable A; C subscribes observable B <strong>withlatestfrom</strong> A. The changes in A did cascade down to B then to C but the value from A is not the latest.</li>
  <li>Second setup: B subscribes observable A; C subscribes <strong>combineLatest</strong> observable of A and B. This setup works but I get two updates for C, first from B and then from A.</li>
  </ul>
  
  <p>How can I set up my observables / subscription such that when A is updated, C will only get updated once with latest value from A and B?</p>
  
  <p>EDIT - CODES ADDED</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var A = new Rx.BehaviorSubject(1);
  var A_Observable = A.asObservable();
  var B = new Rx.BehaviorSubject(10);
  var B_Observable = B.asObservable();
  
  A_Observable.subscribe(function(A_value) {
    var newB = A_value * 10;
    // console.log("B auto updating to " + newB);
    B.next(newB);
  });
  
  // LATEST FROM OBSERVABLE
  var latestFromObservable = B_Observable.withLatestFrom(A_Observable);
  latestFromObservable.subscribe(function(data) {
    console.log("LATEST FROM : Value for A is " + data[1] + " ; Value for B is " + data[0]);
  });
  
  // COMBINE ALL OBSERVABLE
  var combineAllObservable = Rx.Observable.combineLatest(A_Observable,B_Observable);
  combineAllObservable.subscribe(function(data) {
    console.log("COMBINE LATEST : Value for A is " + data[0] + " ; Value for B is " + data[1]);
  });
  
  // UPDATE TO A
  setTimeout(function(){
    console.log("UPDATING A");
    A.next(2);
  },1000);
  
  // SATISFACTORY RESULT
  setTimeout(function(){
    console.log("SATISFACTORY RESULT : Value for A is 2 ; Value for B is 20 --- CALLED ONLY ONCE WITH LATEST VALUES");
  },2000);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>