Scinder le modèle angulaire en plusieurs petits modèles

Dans mon Angulaire de l'app, j'essaie de comprendre ce qui serait le bon moyen de partager ma page dans les composants.

La page avant que le changement est similaire à:

<div id='settings'>

  <p class='controlGroup' ng-controller="FirstCtrl">
    <label class='control-label'>First Control</label>

    <div class="control">
        <!-- some inputs -->
    </div>
  </p>

  <p class='controlGroup' ng-controller="SecondCtrl">
    <label class='control-label'>Second Control</label>

    <div class="control">
        <!-- some inputs -->
    </div>
  </p>

    </p>


  <button id='saveBtn' class='saveButton' ng-click='saveSettings()'>Save Changes</button>

</div>

Bien que la logique de commande est séparé de deux contrôleurs différents, je veux séparer leur modèle, donc il serait facile de les réutiliser ou de les déplacer vers un autre emplacement.

Je vois beaucoup d'options: ng-includescript tag etc.

Quelle serait la bonne façon de le faire?

source d'informationauteur Roy Tsabari