Am I using Angular directives correctly?
If the only reason is to avoid a few more DOM elements, this sounds like an overkill to me. It is so much easier to use ng-show or hiding/showing depending on the class like it is done in TodoMVC:

&lt;li ng-class="{editing: todo == editedTodo}"&gt;
    ...
    &lt;div class="view"&gt; ... &lt;/div&gt;
    &lt;input class="edit"&gt; ... &lt;/div&gt;
&lt;/li&gt;


Then in CSS:

#todo-list li.editing .view {
    display: none;
}
#todo-list li.editing .edit {
    display: block;
}


Also it does not feel right to do DOM manipulation with .html() jQuery-style, maybe use dynamic template property instead.

If having additional elements in DOM is really a concern, 
there are also ng-if and ng-switch.
Though I personally prefer ng-show/ng-hide exactly because
this way I don't have to rebuild the DOM.

To put this into perspective, I have tried using ngRouter on my site 33hotels.com, which does rebuild the view every time the route is changed. That felt in considerable delay. Instead I have all my Views inside my DOM at all times and only hide/show them depending on the route. The performance difference is dramatic - it now feels instant.

Finally, both templates have common fragment, which does not make code feel DRY. Upon any change you'll have to edit each of them. I would simply keep the common part outside any directive, and put the dynamic part inside ng-whatever.

Also note that the HTML tag &lt;h1&gt; has semantic meaning, not presentational. That is, it marks your main header. Any presentation adjustment should be done via CSS.