AngularJS: can't change input type

Question

Whenver I have an Angular expression as a value to input\'s type, it won\'t work:

Answer 1

Here is a slight extension to @vidriduch's answer. In this case I am using a model object 'config' of the form {type:"password", value:"topsecret"}, and displaying it like this:

Ideally I could change the config object as required, and use the same input element to edit any config record with matching type/value. My original way of switching records was to call the below scope function:

$scope.newRecord = function (newcfg) {
    $scope.config = newcfg;
};

However, I sometimes got conversion errors or complaints about validation. This is in Chrome 47. It really didn't like switching from text to dates, for example. The browser seemed to pick up the change of value before the change in type, or vv.

I solved this by forcing the model (and so the type) to reset in between changes.

$scope.newRecord = function (newcfg) {
   $scope.config = {}; //clear the model object
   $timeout(function() {
      $scope.config = newcfg;
   }, 0); //zero delay needed

};

This may not be an ideal solution, but it illustrates a 'gotcha' that others might experience.