title: Reusable forms in angular
body: <p>So I have a form that's basically the same in many different instances, except the names of the inputs may vary, and the data the form represents will be different.</p>
  <p>I got a good start on reusable snippets from <a href="https://stackoverflow.com/questions/12698796/is-it-possible-to-do-reusable-snippets-within-angular-templates">this post</a>, but I want to expand on that, and figure out how to make it more dynamic.</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;script type='text/ng-template' id=&quot;mySnippet&quot;&gt; 
    &lt;form&gt;
      {{mySinppet.firstThing}}&lt;input id=&quot;first-input&quot;/&gt;
      {{mySinppet.secondThing}}&lt;input id=&quot;second-input&quot;/&gt;
    &lt;/form&gt;
  &lt;/script&gt;
    
  &lt;ng-include src=&quot;'mySnippet'&quot; ng-model=&quot;thingOne&quot;&gt;&lt;/ng-include&gt;
  &lt;ng-include src=&quot;'mySnippet'&quot; ng-model=&quot;thingTwo&quot;&gt;&lt;/ng-include&gt;
  </code></pre>
  <p><strong>JS</strong></p>
  <pre><code>$scope.thingOne={
    firstThing: &quot;1&quot;,
    secondThing: &quot;2&quot;,
    foo: src[&quot;first-input&quot;],
    bar: src[&quot;second-input&quot;],
  };
  $scope.thingTwo={
    firstThing: &quot;3&quot;,
    secondThing: &quot;4&quot;,
    first: src[&quot;first-input&quot;],
    second: src[&quot;second-input&quot;],
  };
  </code></pre>
  <p>Here's the plunker for this code (which obviously doesn't work): <a href="https://plnkr.co/edit/iCOIq88e7gSSYaE92b0t?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/iCOIq88e7gSSYaE92b0t?p=preview</a></p>
  <p>So how do I set up the snippet/ng-includes to allow communication with a model?</p>