How To: Create a form show/hide password system in AngularJS

Numerous times during working with AngularJS there have been these moments of, oh, wow... OH, now that's cool... wow... Usually followed up by a warm happy feeling because what I wanted to do was possible and the solution was so simple. This started to happen pretty frequently. As a result I have started to make notes of when these situations occurred. So that I can do a quick posting about them to share with others having similar problems. Here is one of those handy tricks.

A form I was working on required the use of a password input box. But the kicker was that this input box had an accompanying checkbox that would display the password when checked. Angular makes this pretty easy for us to do without any nasty tricks.
This is the solution that I used:

<input ng-show="showpassword" type="text" ng-model="password">
<input ng-hide="showpassword" type="password" ng-model="password">
<input type="checkbox" ng-model="showpassword" ng-checked="false">

The magic of angular directives helps us accomplish our goal. What I have setup is two different input fields. One of them is setup as a standard text type, the other setup as a password type. The important part is that both input fields are sharing the same model. This ensures that the same data exists between both of the fields. A change in one of them will update the value of the other. Next, a model is bound to the value of the "Show Password" checkbox. This model is also used as the argument for the ng-show and ng-hide directives on the input fields.

What this does is when the checkbox is marked, the showpassword model evaluates to true. That true then gets applied to the ng-show directive on the standard text field, causing it to be visible. Likewise, the ng-hide value on the password input gets set to true, causing it to be invisible. This effectively will make the input boxes trade places making only one of them visible at a time giving us the effect that there is a shown/hidden password depending on that checkbox being clicked. The swap is instantaneous and no visual issues occur, a fluid and clean show/hide password mechanic.