title: Angular 2 sibling components 2 way binding
body: <p>I am having 2 sibling components displayed at the same time to the user. One of them is a QuestionList which takes an array of questions from service and display list of questions. Once you click on a particular question it displays (next to the list) question details like seen below <a href="https://i.stack.imgur.com/60MWX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/60MWX.png" alt="enter image description here"></a></p>
  
  <p>Question detail component uses router to take question id from the URL and stores it in a separate variable called selectedQuestion like this:</p>
  
  <pre><code>selectedQuestion: Question;
  ngOnInit() {
      this.subscription = this.route.params.subscribe(
        (params: any) =&gt; {
          this.questionIndex = params['questionId'];
          this.selectedQuestion = this.qs.getQuestion(this.questionIndex);
        }
        );
    }
  </code></pre>
  
  <p>In the template selectedQuestion is binded using [(ngModel)] -> 2 way data binding so I can update the question by simply sending selectedQuestion to the service. </p>
  
  <p><strong>I am struggling to understand why and how Angular2 updates the list when I change something in the question detail view?</strong> I thought cause I have created separate variable called selectedQuestion, list on the left should not be updated till I push changes to using the service? My understanding of using ngModel is that it should 2 way bind to selectedQuestion only and definitely not update my service </p>