Simple Chart User Interface

We need AngularJS UI for selecting datasets and geographic locations to be plotted on dynamic chart. See Attcahed files for basic layout idea. List of locations is provided as JSON object. Locations have id, state_id, name and few other parameters. List of datasets is provided as JSON object. Locations have id, parent_id, name and few other parameters. We will provide sample JSON files for Datasets, Locations and misc data like state names. As a result, we need UI, that builds two lists: - List of selected Datasets (array of objects) - List of selected Locations (array of objects) And be able to delete from these lists by id when location or dataset is deselected. parent_id in datasets defines hierarchy of datasets. i.e. some datasets are subsets of others. This is only used to structure list of datasets. Only dataset id is used to add dataset to the plot. Locations should be arranged by state. State name should be listed above corresponding list of locations within that state. State name should remain on top of the list as user scrolls. If state has long list of locations, that does not fit in visible area, state name should stick at top of visible area (see example at this link: [login to view URL] Note: In this task – we assume, that one location only has one parent state and only appears in list once. In further versions one location may appear under multiple different states. Thus it will appear multiple times in the list. Once location is added to the list of selected locations, it should be disabled in list of available locations (grayed out or marked, so it is clear to user, that the location is already added). When it is deleted from list of selected locations, it should become selectable again. Typical number of locations is between 400 and 3000 List should be searchable (hide locations with names, that don’t match search string ) UI should work well on mobiles. Any questions are welcome.