Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular-animate.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.3/css/foundation.css">
<div ng-controller="MyCtrl" class="foo">
    
<p class="foo">
    <input ng-hide="showpassword" 
        type="password" 
        name="password" id="inputPassword"
        class="form-control foo" 
        placeholder="password"
        ng-model="foo"
        ng-minlength="4"
        ng-maxlength="5"
    ng-pattern="/^\d+$/"/>
    
    <input ng-show="showpassword" 
        type="text" 
        name="password2" 
        class="form-control foo" 
        placeholder="password"
        ng-model="foo"
        ng-minlength="4"
        ng-maxlength="5"
    ng-pattern="/^\d+$/"/>
    
        <button class="btn btn-default foo" ng-click="showpassword=!showpassword">show pass</button>
    
    </p>

</div>

CSS

.foo.ng-animate { transition:0s none;
       -webkit-transition:0s none;
       animation: 0s none;
       -webkit-animation: 0s none; }

JavaScript

var myApp = angular.module('myApp',['ngAnimate']);

myApp.controller('MyCtrl', function($scope) {
    
    $scope.showpassword= false;
    $scope.foo = "12345";
});