AngularJs - show-hide password on click event using directive -

i have 1 input field password , 1 button input field
now, if type of input field passwordi.e type="password", on click of button should become text i.e type="text"
if again click on same button should change type="password"

means should toggle value of type of input element

i have done using controller, it's working fine controller. below working code using controller

but instead of controller if want use directive how handle toggle condition using directive

purpose - want use functionality on multiple input elements

html

<div class="input-group">    <label>password</label>    <input type="{{inputtype}}" class="form-control" ng-model="password" />    <span ng-click="show()">show</span> </div> 

controller

$scope.inputtype = 'password';  $scope.show = function() {   if ($scope.inputtype === 'password') {      $scope.inputtype = !$scope.inputtype;      $scope.inputtype = 'text';   } else {      $scope.inputtype = !$scope.inputtype;      $scope.inputtype = 'password';   } } 

i tried using directive - below trial code
not getting how change type of <input /> element using directive

directive

.directive('mydir', function() {     require: 'ngmodel',     link: function (scope, element, attrs) {        console.log(attrs.type);        attrs.type = 'password'        // how call below code on click event or on click of <span>            using password         if (attrs.type === 'password') {           attrs.type = !attrs.type;           attrs.type = 'text';        } else {           attrs.type = !attrs.type.inputtype;           attrs.type = 'password';        }     } }) 

html using directive

<div class="input-group">    <label>password</label>    <input my-dir type="" class="form-control" ng-model="password" />    <span ng-click="show()">show</span> </div> 

you can use ng-attr-type directive dynamically change input type. example:

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

you can change value of ispassword click event , make toggle.

using directive

.directive('ispassword', function() {   return {     restrict : 'a',      scope: {       ispassword: '=ispassword'     },     link: function (scope, element, attrs) {        scope.$watch('ispassword', function(a, b){          element.attr('type', ? 'password' : 'text')        })     }   } });  <input is-password="checkpassword" placeholder="put password" />  <input type="checkbox" ng-model="checkpassword" /> 

update on button click

<button ng-click="checkpassword=!checkpassword">click</button>