Angular JS – Nested array data and cascading dropdown lists binding

The Requirement is very simple.We have to display data with cascading drop down from the collection.

We have some collection of books. I took a sample of book for initial page mapping.

Nested Angular Drop down

Each row contains dropdowns for books,chapters and titles. By choosing the drop down under book(specify the name of the book), relevant chapter will be loaded. And based on the selection of the chapter, title information will be loaded for that specific book title.

 

From above example each drop down “on change event”,we are passing the current book object to our method and creating variable dynamically for the selected subsequent item.

You can write any logic inside this method like ajax call to pull out sub drop down values, here we will take from same instance.

Plunker Demo:  http://plnkr.co/edit/puDh4B?p=preview