Toggle Password Mask In Angular

HTML

<div ng-app="app" ng-controller="x">
    password is: {{user.password}}
    <br/>
    <br/>
    standard input:
    <input ng-model="user.password" name="uPassword" type="password" ng-hide="isChecked"/>
    <br/>
    <br/>
    password directive: 
    <password ng-model="user.password" name="uPassword" />
</div>

JavaScript

function x($scope) {
    $scope.user = {
        password: 'x'
    };
}

angular.module('app', [])
    .directive('password', function () {
    return {
        template: '' +
            '<div>' +
            '    <input type="text" ng-model="ngModel" name="name" ng-minlength="8" ng-maxlength="20" required />' +
            '    <input type="password" ng-model="ngModel" name="name" ng-minlength="ngMinlength" required />' +
            '    <input type="checkbox" ng-model="viewPasswordCheckbox" />' +
            '</div>',
        restrict: 'E',
        replace: true,
        scope: {
            ngModel: '=',
            name: '='
        },
        link: function (scope, element, attrs) {
            scope.$watch('viewPasswordCheckbox', function (newValue) {
                var show = newValue ? 1 : 0,
                    hide = newValue ? 0 : 1,
                    inputs = element.find('input');
                inputs[show].value = inputs[hide].value;
                inputs[hide].style.display = 'none';
                inputs[show].style.display = '';
            });
        }
    };
});