Adding and deleting Angular directives dynamically (Part 1)

There comes a time in the development of angular applications when you get into the nitty -gritty of directives.
Yes, of course, it was the first thing slammed at you when you started with angular and you soon began to enjoy using ng-this and ng-that. But now writi-'ng' one of those and manipulati-'ng' them dynamically? OMG!!

Its like when someone threw this at your face.

At first you say "Whaaaa?" 

Then you lick a little off and say "Hmm!" 

Then you lick some more and say "mmmmmmmmmmmmm"

And then you're asked to make something like that. From scratch. My reaction?

Alright alright, getting to the point! Ill use this post as the first of three posts, each post covering the following:

1. Write a directive (duh! aren't these a gazillion posts already?) But Ill be using this directive to explore # 2 and #3, hence the introduction. 

2. Add a directive dynamically. 

3. Remove a directive dynamically.

The entire code for this can be found here .

Part 1 

GOAL : Writing a directive

This part will assume that a reader is familiar with the concept of a directive and simple Angular basics.
Once the reader has grasped the concept theoretically, and now wishes to get his/her hands dirty with some real code,  the following post can be used as a beginner tutorial for the same.

We will write a simple directive that creates a breadcrumb. It has a label and lights up to a different color when we hover over it.

Writing a custom directive is very well explained on the web, and I will not repeat the process. Some of the material that helped me is

http://www.sitepoint.com/practical-guide-angularjs-directives/

http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals

I've created a directive for a breadcrumb (similar to UI pills). We will be using this breadcrumb directive to demonstrate how to add and delete directives dynamically. 

This is the jsfiddle for our breadcrumb directive.