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

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

You want the input box to be hidden or show/hide password?

Here is what i have done till now

HTML

<div class="btn-group">
    <input ng-hide="hidevar" id="searchinput" type="password" class="form-control" placeholder="password" >
      <span id="searchclear" ng-click="hideinpbox();">HIDE</span>
</div>

CSS :

#searchinput {
    width: 200px;
}

#searchclear {
    position:absolute;
    right:5px;
    top:0;
    bottom:0;
    height:14px;
    margin-top:7px;
    margin-right:5px;
    font-size:14px;
    cursor:pointer;
    color:#ccc;
}

http://plnkr.co/edit/TfKvlh1mM6wsNrPQKY4Q?p=preview

i hope that it is useful for you!

.html

<div class="form-group">
    <label class="control-label text-left col-md-4" for="lblUserPassword"><b>Password</b></label>
    <div class="col-md-5">
          <div class="input-group">
               <input id="txtPassword" type="password" class="form-control" name="Password" />
               <span id="spnPassword" class="add-on input-group-addon" style="cursor:pointer;">
                   <i id="icnPassword" class="glyphicon glyphicon-eye-open"></i>
               </span>
           </div>
       </div>
   </div>

.js

    $(function(){ var tmpCounter = 0;
      $("#spnPassword").on("click", function () {
      if (tmpCounter == 0) {
        $("#txtPassword").attr("type", "text");
        $("#icnPassword").attr("class", "glyphicon glyphicon-eye-close");
        tmpCounter = 1;
      }
      else {
        $("#txtPassword").attr("type", "password");
        $("#icnPassword").attr("class", "glyphicon glyphicon-eye-open");
        tmpCounter = 0;
     }
});

});

UI