Inserting directives into HTML in AngularJS?

Question

I'm fairly new to AngularJS and trying to think the Angular way.
Right now I'm working on an app that has different features that register in an angular service called FeatureRegistry. From there they are taken and inserted into a sidebar from an FeatureSelectionController. By clicking on a feature the startFeature() function of the appropriate feature should be invoked, and after that the feature should be added to the main view (but where should this DOM manipulation occur?).

So there is my question. What is the best way (the angular way) of adding directives to the DOM, I don't necessarily want to use jQuery to do this (and also want to limit the uses of $compile, $watch etc).

The directives in the mainView can have an isolated scope, because the features perform actions that are independent from each other (the data they share are encapsulated in angular services).

What would be the angular way to insert the directives?

I always read that DOM manipulations should only happen in directives, but in the documentations and also in other questions I didn't find THE way to do it.

Answer 1

Here's a quick demo: http://plnkr.co/edit/eZTtRVTPb7k9kgS8woKh?p=preview

I don't necessarily see the need for directives here ... unless there is a lot of common functionality between feature in the list, the maximized feature, and the minimized feature.

If you really do have lots of common functionality between the three lists, you could do something like this:

<feature ng-repeat="f in registry.all()" model="f" state="list">
<feature ng-repeat="f in registry.maximized()" model="f" state="open">
<feature ng-repeat="f in registry.minimized()" model="f" state="minimized">

Then in your directive template, you could have your common functionality then determine what to have depending on the state using ng-switch or ng-show.

Do you need help writing the actual directive?