title: angularjs: single html template for multiple controllers
body: <p>I have been thinking this question for a while, what's best practice to reuse html template in angularjs given the view(html) is bound to controller in case of two-way data binding ?</p>
  
  <p>for example:</p>
  
  <pre><code>&lt;a ng-repeat="(uuid, parent) in pageData.parents" class="list-group-item list-group-item-padding"  ng-click="click(parent.uuid)"&gt;
      &lt;table class="table-grid"&gt;
          &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  {{parent.name}}
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;span class="pull-right {{parent.stateCss}} state-label-font"&gt;{{parent.state}}&lt;/span&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>in above snip of code, the view is bound to some controller let's say ParentController, you can see all data in view are named after 'parent'. Now I have another controller say ChildController which wants to reuse the  same html piece of code but the data are named after 'child'. That says data binding in this example will change to {{child.name}}, {{child.stateCss}} ... </p>
  
  <p>the way Angularjs binds model to view kind of causes a lot of duplicate html code even they look quite similar. Actually not Angularjs, server side MVC framework has the same problem as long as you hard code model variable name in view file for later rendering. </p>
  
  <p>I saw some web application not using MVC has a few html code which setup basic skeleton of page, then uses JQuery to dynamically feed data to view in programming way. This JQuery way is not my preference but it does save lots of html code, a application I think is fairly complex only as ~1000 html code that accomplishes tasks like ~10 sub pages, list, wizards ...</p>
  
  <p>In angularjs, one solution I can imagine is replacing model variables in view with customized directive to change their scope/controller at runtime. Or having a directive receiving a configuration object which generates html element binding to configured controller/scope in compiling time.</p>
  
  <p>what's your thought?</p>