Avoid scope variable change in all instance of AngularJS directive

Question

I am currently learning AngularJS at the moment and was wondering if someone would be able to help me.. I have this directive that shows/hide a specific icon element after the input element, however when I have three inputs stacked above each other, and I click one of the icons, all three of them changes. How do I limit the changing of icons/variable only to that specific element that was clicked?

.directive('revealInput', function() {
  return {
    restrict: 'A',
    template: function(element, attrs) {
      let iconEl = angular.element('<md-icon class="show-password-icon" title="{{ showPassword ?  HIDE_PASSWORD : SHOW_PASSWORD | translate }}" ng-click="toggleReveal()">' 
      + '{{showPassword ? "visibility_off" : "visibility"}}'
      + '</md-icon>')

      if (attrs.revealInput) {
        return element[0].after(iconEl[0]);
      }
    },
    link: function(scope, element, attrs) {
      scope.showPassword = false;
      // This is to toggle the input element's type attribute depending on showPassword's value. 
      scope.toggleReveal = function () {
        scope.showPassword = !scope.showPassword;
        element[0].setAttribute('type', scope.showPassword ? 'text' : 'password')
        element[0].focus();
      }
    },
  }
});  

HTML CODE:

<input type="password" ng-attr-reveal-input="revealInputEnabled" />