title: AngularJS: Get value from select and inject HTML based on it
body: <p>I working on a contact form. The point is it should be accessible without JavaScript. If JavaScript is avaible I want ask visitors about some details based on their purpose of contact.</p>
  
  <p>HTML could look like this (labels are skipped on purpose, to shorten the code):</p>
  
  <pre><code>&lt;form action=""&gt;
      &lt;select name="purpose"&gt;
          &lt;option value="hello"&gt;Just saying hi&lt;/option&gt;
          &lt;option value="support"&gt;Customer Support&lt;/option&gt;
          &lt;option value="interview"&gt;Interview&lt;/option&gt;
      &lt;/select&gt;
      ...
      &lt;button&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Well, if I could I would just add some areas that would be shown based on "model". But I can't do it because I don't want to show additional fields to people without JS.
  It would be like this:</p>
  
  <pre><code>&lt;form action="" ng-app&gt;
      &lt;select name="purpose" ng-model="purpose"&gt;
          &lt;option value="hello"&gt;Just saying hi&lt;/option&gt;
          &lt;option value="support"&gt;Customer Support&lt;/option&gt;
          &lt;option value="interview"&gt;Interview&lt;/option&gt;
      &lt;/select&gt;
      ...
      &lt;div ng-show="purpose == 'support'"&gt;
          &lt;input type="text" name="customernumber" /&gt;
      &lt;/div&gt;
      &lt;div ng-show="purpose == 'interview'"&gt;
          Sorry, I'm not giving interviews
      &lt;/div&gt;
      ...
      &lt;button&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The point is that I will be asking a lot of additional questions. With JS disabled the visitor will be seeing a bloated contact form with all fields and messages.</p>
  
  <p>I'm looking for a solution that would read the value of  and inject HTML from JS file into a specific place.</p>
  
  <pre><code>&lt;form action="" ng-app&gt;
      &lt;select name="purpose" ng-model="purpose"&gt;
          &lt;option value="hello"&gt;Just saying hi&lt;/option&gt;
          &lt;option value="support"&gt;Customer Support&lt;/option&gt;
          &lt;option value="interview"&gt;Interview&lt;/option&gt;
      &lt;/select&gt;
      ...
      {{injectedHTML}}
      ...
      &lt;button&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><em>It sounds strange, but everything must be according to the requirements of local municipal office. They want to show these specific fields only to people with JS.
  Maybe they think it is good for accessibility. I'm not sure.</em></p>
  
  <p>Thank you all.</p>