title: How do I subscribe to changes in an angular model on an observable?
body: <p>I'm loading a list of items over http and using a BehaviorSubject to stream the updates from an angular service to a component. The items have a boolean on them which is bound to a checkbox.</p>
  
  <p>I want another component to use the same service and subscribe to the same data source, but only show the items that are checked. This code below works fine when the initial data loads. But if the checkbox in the first component is checked, it doesn't update the second component.</p>
  
  <p>Do I need to manually update the object from the first component on check and push it back into the observer? </p>
  
  <p><a href="https://stackblitz.com/edit/angular-mgvz2w?file=src%2Fapp%2Fservice.component.ts" rel="nofollow noreferrer">Full example on stackblitz here</a></p>
  
  <pre><code>export class MyService {
  
      private mySubject = new BehaviorSubject&lt;MyModel[]&gt;([]);
  
      allObservable: Observable&lt;MyModel[]&gt;  = this.mySubject.asObservable();
  
      selectedObservable = this.allObservable.pipe(map(result =&gt; result.filter(f =&gt; f.selected)));
  
      constructor() {
          this.fundsSubject.next([
            { selected: true },
            { selected: false },
          ]);
      }
  }
  
  export class MyModel {
  
    public selected: boolean = false;
  
  }
  </code></pre>