I am new to reactive programming and trying to learn by developing an Angular + RxJs app. The idea of the app is to mimic github features like Manage repo, Manage branches, etc.. This app will have a left nav that will display all the repo(s) associated to the logged in user, clicking on the repo will bring all the branches associated to the repo, clicking on the branch will bring all the files under the branch. User can add/edit/delete branch, add/edit/delete files in a branch (the usual use cases...) basically a lazy loading concept.

My Data Model

Repository  
-----UserDetails  
-----Array[BranchArtifact]  
-------------Array[Files] called currentElements
-------------Array[Files] called changedElements
-------------Array[Files] called conflictElements

Idea 1:

Have a BehaviorSubject<Array<Repository>> / method1() that will return the connected Observable<Array<Repository>> which can be subscribed in the component that will render the Repo level tree navigation nodes (This rendering part will be repsonsible for just the repo level operations like add/del repo)

Have a BehaviorSubject<Array<BranchArtifact>> / method2() that will return the connected Observable<Array<BranchArtifact>> which can be subscribed in the component that will render the Repo level tree navigation nodes (This rendering part will be repsonsible for just the Branch level operations like add/del Branch)

... and so on for each lazy loaded level

This idea feels like the nested object is flattened at the stream level but then on the UI side is still indirectly managed in a nested fashion (as each nested level will have to tie back to its parent node)

Idea 2:

Have one BehaviorSubject<Array<Repository>> / Observable<Arra<Repository>> and on every click on the tree node fetch the desired sub level data, update the subject with the returned value and let the subscribers infer the updated data (as the stream will always emit a Repository(s) object) and manage the UI accordingly (may be emit a change type to ease the subscribers work). This feels more like an imperative programming style... In this design the UI logic will have to navigate to the correct node to manage it for every value emitted in the stream.

I have gone tro a lot tutorials, videos and tech talks on this subject and couldn't find anything beyond a basic data structure example. Any help is greatly appreciated...

Question to experts here,

1. Are these ideas any good
2. Am I thinking reactive
3. If i am totally off base here please point to something that will help me understand...
4. If there is something simpler please suggest