How can we make show/hide password input in angular js with bootstrap 3?

You can dynamically change the input type with the ng-attr-type directive. For example:

<input ng-attr-type="{{ showPassword ? 'text' : 'password' }}">

you can tie the showPassword to the click event and make it toggle.

Update (from @Ferie's comment):

HTML

<span class="showPassword" ng-click="togglePassword()">{{ typePassword ? 'Hide' : 'Show' }}</span><br> <input type="{{ typePassword ? 'text' : 'password' }}" name="password" placeholder="Password"> 

In the Angular Controller

$scope.togglePassword = function () { $scope.typePassword = !$scope.typePassword; };

AngularJS / UI Bootstrap Solution

• Use Bootstrap's has-feedback class to show an icon inside the input field.
• Make sure the icon has style="cursor: pointer; pointer-events: all;"
• Use ng-if to show/hide different forms where the <label type="password"> vs <label type="text">

HTML

<!-- index.html snippet -->    <!-- show password as type="password" --><div ng-if="!showPassword"       class="form-group has-feedback">    <label>password</label>    <input type="password"           ng-model="params.password"           class="form-control"           placeholder="type something here...">    <span ng-if="params.password"          ng-click="toggleShowPassword()"          class="glyphicon glyphicon-eye-open form-control-feedback"           style="cursor: pointer; pointer-events: all;">    </span>  </div>  <!-- show password as type="text" -->  <div ng-if="showPassword"       class="form-group has-feedback">    <label>password</label>    <input type="text"           ng-model="params.password"           class="form-control"           placeholder="type something here...">    <span ng-if="params.password"          ng-click="toggleShowPassword()"          class="glyphicon glyphicon-eye-close form-control-feedback"           style="cursor: pointer; pointer-events: all;">    </span>  </div>

JavaScript

// app.jsvar app = angular.module('plunker', ['ui.bootstrap']);app.controller('MainCtrl', function($scope) {    $scope.params = {};    $scope.showPassword = false;    $scope.toggleShowPassword = function() {        $scope.showPassword = !$scope.showPassword;    }});

Give it as spin with the plunker: http://plnkr.co/edit/oCEfTa?p=preview

you can simply do

<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">

read here