title: Angular: ng-click on div not working
body: <p><strong>UPDATE</strong> I've added full HTML output at bottom.</p>
  
  <p><strong>2nd UPDATE</strong> At the very bottom is how I've defined my angular module in file "app.js"</p>
  
  <p>I have an ng-click that I'm trying to use to activate an ng-show elsewhere.</p>
  
  <pre><code>&lt;div class="img_div" ng-click="showSwiper = ! showSwiper"&gt;
      &lt;img class="modal_img img_screenings" src="images/producersclub.jpg"&gt;
      &lt;p class="movie_p" align="center"&gt;EXPANDED METAL, 11am&lt;/p&gt;
      &lt;p class="screenings_p" align="center"&gt;THE PRODUCERS CLUB&lt;/p&gt;
      &lt;p class="location_p" align="center"&gt;PHILIP K. DICK FILM FESTIVAL&lt;/p&gt;
      &lt;p class="date_p" align="center"&gt;May 29, 2017&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="swiper-container" ng-show="showSwiper"&gt;
  ....
  &lt;/div
  </code></pre>
  
  <p>When I click the div <code>img_div</code>, nothing appears to happen and element <code>swiper-container</code> does not appear. </p>
  
  <p>I didn't think I needed to add anything to my controller to make this work. My controller:</p>
  
  <pre><code>(function () {
  
      angular
          .module('app')
          .controller('screeningsController', Controller);
  
      function Controller($scope, $location, $anchorScroll) {
  
          $scope.scrollTo = function(id) {
              $location.hash(id);
              $anchorScroll();
          }
  
          $scope.seo = { 
              metaTitle : '', metaDescription : '' 
              }; 
  
          $scope.$parent.seo = { 
              metaTitle : 'Screenings', 
              metaDescripton: 'A list of all upcoming screenings.' 
              }; 
          }
      }
  )();
  </code></pre>
  
  <p>Is there anything that needs to be done to the controller to make this work?</p>
  
  <pre><code>&lt;html ng-app="app" class="ng-scope"&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}&lt;/style&gt;
  
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;title&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1"&gt;
  
      &lt;!--prerender.io &amp; Facebook--&gt;
      &lt;meta name="fragment" content="!"&gt;
      &lt;meta property="og:url" content=""&gt;
      &lt;meta property="og:title" content="Screenings"&gt;
      &lt;meta property="og:description" content=""&gt;
      &lt;meta property="og:image" content=""&gt;
  
      &lt;!--angular hash correction--&gt;
      &lt;base href="/"&gt;
  
      &lt;!--swiper--&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" type="text/css"&gt;
  
      &lt;!--main--&gt;
      &lt;link rel="stylesheet" href="css/style.css" type="text/css"&gt;
  
      &lt;!--swiper style--&gt;
      &lt;link rel="stylesheet" href="css/swiper.css" type="text/css"&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;!-- Swiper --&gt;
      &lt;div class="swiper-container swiper-container-horizontal ng-hide" ng-show="showSwiper"&gt;
  
          &lt;div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);"&gt;
              &lt;div class="swiper-slide swiper-slide-active" data-hash="the-producers-club" style="width: 1280px; margin-right: 30px;"&gt;
                  &lt;img class="swiper_img" src="images/producersclub.jpg"&gt;
              &lt;/div&gt;
              &lt;div class="swiper-slide swiper-slide-next" data-hash="hummingbird-studios" style="width: 1280px; margin-right: 30px;"&gt;
                  &lt;img class="swiper_img" src="images/CHI.png"&gt;
              &lt;/div&gt;
              &lt;div class="swiper-slide" data-hash="anthology-film-archives" style="width: 1280px; margin-right: 30px;"&gt;
                  &lt;img class="swiper_img" src="images/large.jpg"&gt;
              &lt;/div&gt;
              &lt;div class="swiper-slide" data-hash="red-hook-vision-center" style="width: 1280px; margin-right: 30px;"&gt;
                  &lt;img class="swiper_img" src="images/13119742_10209232217392526_8176078770950589764_o.jpg"&gt;
              &lt;/div&gt;
              &lt;div class="swiper-slide" data-hash="latino-sports-club" style="width: 1280px; margin-right: 30px;"&gt;
                  &lt;img class="swiper_img" src="images/12419141_10208971503394839_6519551385362745616_o (1).jpg"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Add Pagination --&gt;
          &lt;div class="swiper-pagination swiper-pagination-fraction" style="display: none;"&gt;
              &lt;span class="swiper-pagination-current"&gt;1&lt;/span&gt; / &lt;span class="swiper-pagination-total"&gt;5&lt;/span&gt;&lt;/div&gt;
          &lt;!-- Add Arrows --&gt;
          &lt;div class="swiper-button-next fader" style="display: none;"&gt;
          &lt;/div&gt;
          &lt;div class="swiper-button-prev fader swiper-button-disabled" style="display: none;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!--angular partials--&gt;
      &lt;!-- uiView: --&gt;&lt;ui-view class="ng-scope"&gt;
  
  &lt;!--HERE ARE THE NG-CLICKS--&gt;   
  &lt;div id="screenings" class="ng-scope"&gt;
      &lt;div class="img_div" ng-click="showSwiper = !showSwiper"&gt;
          &lt;img class="modal_img img_screenings" src="images/producersclub.jpg"&gt;
          &lt;p class="movie_p" align="center"&gt;EXPANDED METAL, 11am&lt;/p&gt;
          &lt;p class="screenings_p" align="center"&gt;THE PRODUCERS CLUB&lt;/p&gt;
          &lt;p class="location_p" align="center"&gt;PHILIP K. DICK FILM FESTIVAL&lt;/p&gt;
          &lt;p class="date_p" align="center"&gt;May 29, 2017&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="img_div" ng-click="showSwiper = !showSwiper"&gt;
          &lt;img class="modal_img img_screenings" src="images/CHI.png"&gt;
          &lt;p class="movie_p" align="center"&gt;EXPANDED METAL, 9pm&lt;/p&gt;
          &lt;p class="screenings_p" align="center"&gt;HUMMINGBIRD STUDIOS&lt;/p&gt;
          &lt;p class="location_p" align="center"&gt;CHICAGO, IL&lt;/p&gt;
          &lt;p class="date_p" align="center"&gt;April 21, 2017&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="img_div" ng-click="showSwiper = !showSwiper"&gt;
          &lt;img class="modal_img img_screenings" src="images/large.jpg"&gt;
          &lt;p class="movie_p" align="center"&gt;EXPANDED METAL, 6pm&lt;/p&gt;
          &lt;p class="screenings_p" align="center"&gt;ANTHOLOGY FILM ARCHIVES&lt;/p&gt;
          &lt;p class="location_p" align="center"&gt;NEW YORK, NY&lt;/p&gt;
          &lt;p class="date_p" align="center"&gt;September 14, 2016&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="img_div" ng-click="showSwiper = !showSwiper"&gt;
          &lt;img class="modal_img img_screenings" src="images/13119742_10209232217392526_8176078770950589764_o.jpg"&gt;
          &lt;p class="movie_p" align="center"&gt;EXPANDED METAL, 8pm&lt;/p&gt;
          &lt;p class="screenings_p" align="center"&gt;RED HOOK VISION CENTER&lt;/p&gt;
          &lt;p class="location_p" align="center"&gt;BROOKLYN, NY&lt;/p&gt;
          &lt;p class="date_p" align="center"&gt;May 19, 2016&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="img_div" ng-click="showSwiper = !showSwiper"&gt;
         &lt;img class="modal_img img_screenings" src="images/12419141_10208971503394839_6519551385362745616_o (1).jpg"&gt;
         &lt;p class="movie_p" align="center"&gt;EXPANDED METAL, 11:15pm&lt;/p&gt;
         &lt;p class="screenings_p" align="center"&gt;LATINO SPORTS CLUB&lt;/p&gt;
         &lt;p class="location_p" align="center"&gt;BROOKLYN, NY&lt;/p&gt;
         &lt;p class="date_p" align="center"&gt;April 1, 2016&lt;/p&gt;
     &lt;/div&gt;   
  &lt;/div&gt;
  
  &lt;script class="ng-scope"&gt;
  
      swiper.update();
      //clear any pre-loaded slides
      swiper.removeAllSlides();
  
      //store images in swiper
          $(".modal_img").each(function(i,x) {
              var closest_venue = ($(this).closest('.img_div').find('.screenings_p').text());
              closest_venue = closest_venue.replace(/\s+/g, '-').toLowerCase();
              console.log(closest_venue);
              swiper.appendSlide('&lt;div class="swiper-slide" data-hash="' + closest_venue + '"&gt;&lt;img class="swiper_img" src="' + $(this).attr("src") + '"/&gt;&lt;/div&gt;');
          })
  
  
      //open swiper
  
      //click an image
      $(".img_div").click(function() {
          //find position within swiper sliders
          var position = $(this).index();
          //show swiper
          //$('.swiper-container').css('display', 'inline');
          swiper.update();
          //jump to position in swiper
          swiper.slideTo(position,0,false );
      });
  
  
      //click events
  
      //attach click event to previous button
      $(".swiper-button-prev").click(function(){
          $(".swiper-button-prev").data('clicked', true);
      });
      //attach click event to next button
      $(".swiper-button-next").click(function(){
          $(".swiper-button-next").data('clicked', true);
      });
      //attach click event to swiper image
      $(".swiper_img").click(function(){
          $(".swiper_img").data('clicked', true);
      });
  
  
      //close swiper
  
      //click container
      $(".swiper-container").click(function() {
          //if previous button was clicked, do nothing
          if($('.swiper-button-prev').data('clicked')) {
          //if next button was clicked, do nothing
          } else if($('.swiper-button-next').data('clicked')) {
          //if image was clicked, do nothing
          } else if($('.swiper_img').data('clicked')) {
          //close container
          } else
              //$('.swiper-container').css('display', 'none');
              //reset click events
              $(".swiper-button-prev").data('clicked', false);
              $(".swiper-button-next").data('clicked', false);
              $(".swiper_img").data('clicked', false);
      });
  
  &lt;/script&gt;
  &lt;/ui-view&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Definition of angular module in <code>app.js</code>
      (function () {</p>
  
  <pre><code>    angular
          .module('app', ['ui.router'])
          .config(config)
          .run(run);
  
      etc.
  </code></pre>