title: AngularJs Dynamic Input Type
body: <p>I am trying to create a dynamic input fields based on a given model.
  I want the <code>input</code> elements to have a dynamic <code>type</code> property, but when I do it I get the following exception:</p>
  
  <blockquote>
    <p>Error: type property can't be changed</p>
  </blockquote>
  
  <p>I've read that IE  doesn't support change of the input type, and therefore angular disallowed it for cross-browser compatibility, but I am sure there is a walkaround in my case, when the input elements are loaded only once and don't change after the first load.</p>
  
  <p><strong>The model:</strong></p>
  
  <pre><code>        details: {
              serverName: { type: 'text' },
              port: { type: 'number' },
              nickname: { type: 'text' },
              password: { type: 'password' },
              channel: { type: 'text' },
              channelPassword: { type: 'text' },
              autoBookmarkAdd: { type: 'checkbox' }
          }
  </code></pre>
  
  <p><strong>The html code:</strong></p>
  
  <pre><code>           &lt;ul&gt;
                  &lt;li ng-repeat="(index,detail) in communication.details"&gt;{{index}}:
                      &lt;input type="{{detail.type}}" ng-model="detail.value" /&gt;&lt;/li&gt;
              &lt;/ul&gt;
  </code></pre>