We can decide if our custom directive with a template has to replace the inner HTML of a DOM node or also the element of the node by using the replace property of the directive's definition object.
Point 1 of the example shows the default behavior of a custom directive with a template in the definition object. Here the replace property is specified with the false value, but if it wasn't specified at all in the definition object, that would've been its default value. In this case only the inner HTML of the DOM node where the directive appears is replaced with the template.
Point 2 shows what happens when replace is true. The original span element is replaced with the div element of the template and all the attributes of the original DOM node are merged with those in the template's root node: all the attributes of both the original node and the template appear in the final DOM node and for each attribute the concatenation of its original and its template value will be its final value. In the text area you can see the final DOM node after AngularJS has compiled it (we use the link function because we're sure that at that stage the full HTML template has been compiled). As you can see, you must be very careful on the kind of merged content you might expect as it might not be exactly the merging you would think of.
NOTE: when replace is true, the template must contain a DOM subtree with a single root node otherwise AngularJS will throw an error because the template's DOM cannot reliably replace the original DOM node element.