AngularJS app using directives.

Front-app test image:

You not only can select books by genre but also, delete, update and create new books. If any parameter is missing, the app won't let you add a new blank item.

The genres, also provide user with interaction to list and modify them and delete specific item by $index provided.

Directives are camel-case for 'listBooks' we tag as

<list-books></list-books>

Make sure the ng-click binded functions get the correct variables. So, the controllers can do a proper job.

<input type="text" class="form-control" id="genre" placeholder="Genre" ng-model="genre.name">
			
<button type="submit" class="btn btn-default" ng-click="addGenre($event, genre.name)">Add genre</button>