How do I use a directive to turn my component on and off?

Question

I am zooming in on my website. When someone clicks on the image, I will zoom in. If the user clicks again (anywhere) will close the zoom and return to the page: But I’m having some difficulties in Angular. My component HTML is that way:

<div class="show-image-container" 
     ng-click="d.showImage=false" 
     zoom-image="#article-body" 
     ng-show="d.showImage">
  <img src="images/_a7bb697f6519a49033d211be0bd99986b6d82b95.webp">
</div>

The variable d.showImage is in the Controller. When I click anywhere from the zoom I’m sure that will help false, and close the window through the ng-show. Closing is working, but I’m not able to open this zoom. Initially d.showImage starts with false. My images are like this in html. (And they I can’t change because they are received by backend)

<img src="images/_faffb625b63d75286c34552a802d0a551a9b9339.webp" 
     data-uid="_bdca5c267711"
     data-md-img="images/_faffb625b63d75286c34552a802d0a551a9b9339.webp" 
     data-hd-img="images/_a7bb697f6519a49033d211be0bd99986b6d82b95.webp"
     width="200"
     height="200">

To add the click to the pictures I made a directive:

prisvoApp.directive('zoomImage', ['$rootScope', function ($rootScope) {
  'use strict';

  return {
    restrict: 'A',
    link: function (scope, elm, attrs) {
      function setImages(e) {
        var imgs = $('#article-body img');

        imgs.on('click', function(){
          // O que eu coloco aqui?
        })
      }

      var $container = $(attrs.zoomImage);

      if (attrs.usesPrCompileHtml) {
        $rootScope.$on('compileCompleted', setImages);
      } else {
        $container.bind('DOMSubtreeModified.zoomImage', setImages);
      }
    }
  };
}]);

Controller:

  $scope.d = {
    numThumbsVisible: 0,
    ...
    showImage: false,
 };

This directive is in the body of HTML and is executed once adding click my images, but I don’t know what to put in the click of the images to change the variable d.showImage for true. I tried to make scope.d.showImage=true, but it doesn’t work.

• I can change the first code HTML, the directive and the Controller but not the image itself.
• Another thing the image inside the first code is fixed, because I’m testing this question to open the zoom, but the final idea would be that by clicking on the image (Second code) I would change the source of <img src="images/_a7bb697f6519a49033d211be0bd99986b6d82b95.webp"> for the image I clicked on the case would take the image attribute data-hd-img and put inside src of the first code. However, I don’t know how this change of values in the Angular.