AngularJS: can't change input type

You can't change input's type dynamically since IE disallows this and AngularJS needs to be cross-browser compatible. So even if you might see the changed type displayed in the source code AngularJS won't pick it up - type is only evaluated once and can't be changed.

Please note that the same restriction applies to jQuery: jQuery change input type

You only options for dynamic types are either a custom directive (where you can download a dynamic template or prepare DOM on-the-fly) or using ng-include to include include partials where the input type is a static value.

You cannot change the input type dynamically in any browser and so it is not possible to use dynamic single input statement. You are left with using conditional statement for creation of elements where type is hard-coded.

Use ng-switch on directive where you can compare the type and create elements based on the condition match. For example:

<div class="form-group" ng-repeat="elem in formElements">
 <div class="col-lg-12" ng-switch on="elem.eleType">
  <input ng-switch-when="text" type="text" id="{{elem.id}}" name="{{elem.id}}" class="{{elem.class}}" placeholder="{{elem.placeholder}}" popover-trigger="focus" popover="{{elem.popoverText}}">
  <input ng-switch-when="password" type="password" id="{{elem.id}}" name="{{elem.id}}" class="{{elem.class}}" placeholder="{{elem.placeholder}}" popover-trigger="focus"  popover="{{elem.popoverText}}">
  <input ng-switch-when="email" type="email" id="{{elem.id}}" name="{{elem.id}}" class="{{elem.class}}" placeholder="{{elem.placeholder}}" popover-trigger="focus"  popover="{{elem.popoverText}}">
 </div>
</div>

In this example you are instructing angular script to compare elem.eleType using ng-switch on in second div against actual type i.e, text, password and email in the input tag (compared using ng-switch-when, and only that input element is create where the condition matches, rest will be ignored.

yes you can ... at least now :)

HTML:

<section ng-app="myApp" ng-controller="mainCtrl">
  <input type="{{inputType}}" placeholder="Put your password" />
  <input type="checkbox" id="checkbox" ng-model="passwordCheckbox" ng-click="hideShowPassword()" />
  <label for="checkbox" ng-if="passwordCheckbox">Hide password</label>
  <label for="checkbox" ng-if="!passwordCheckbox">Show password</label>  
</section>
<script src="http://code.angularjs.org/1.2.13/angular.min.js"></script>

JS:

var myApp = angular.module('myApp', []);
myApp.controller('mainCtrl', ['$scope', function( $scope ){

  // Set the default value of inputType
  $scope.inputType = 'password';

  // Hide & show password function
  $scope.hideShowPassword = function(){
    if ($scope.inputType == 'password')
      $scope.inputType = 'text';
    else
      $scope.inputType = 'password';
  };
}]);

source: http://codepen.io/gymbry/pen/fJchw/

UPDATE 17/04/2015:

I have randomly changed Angular version in above Codepen and this seems to work from version 1.0.2 ... Hope this help ...

<input type="text" ng-model="myModel" ng-if="inputType === 'text'"/>
<input type="password" ng-model="myModel" ng-if="inputType === 'password'"/>

This works for me.