title: angularJS ngClick on Image Not Called
body: <p>I am attempting to place an outline around each item on my web page with a class that starts with "col-" and then place an image in the top right corner of the outline for the user to click as follows;</p>
  
  <pre><code>&lt;img id="elementMenu" src="Images/ElementMenu.png" style="display: none" ng-click="menuClick()" /&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-3 col-lg-offset-1"&gt;
              &lt;h1&gt;This is my heading&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-5 col-lg-offset-1"&gt;
              &lt;p&gt;This is my content&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-10 col-lg-offset-1"&gt;
              &lt;h1&gt;This is my heading&lt;/h1&gt;
              &lt;p&gt;This is my content&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my script is;</p>
  
  <pre><code>(function () {
      var app = angular.module("myApp", ["ngRoute", "ui.bootstrap"]);
  }());
  
  (function () {
      var app = angular.module("myApp");
      var $element = {};
  
      var editorController = function ($scope) {
          $scope.menuClick = function () {
              alert("Menu clicked");
          };
  
          $("document").ready(function () {
              $("*[class*='col-']")
              .mouseenter(function () {
                  $element = $(this);
                  $element.addClass("highlightColumn");
  
                  var offset = $element.offset();
                  var width = $element.width();
  
                  var $menu = $("#elementMenu");
                  var menuWidth = $menu.width()
                  var menuOffset = $menu.offset();
  
                  var menuLeft = offset.left + width - menuWidth;
                  $menu.css({ position: "fixed", margin: 0, left: menuLeft, top: offset.top, display: "block" })
              })
              .mouseleave(function () {
                  $element.removeClass("highlightColumn");
                  $("#elementMenu").css({ display: "none" });
              });
          });
      };
  
      app.controller("myController", ["$scope", myController]);
  }());
  </code></pre>
  
  <p>When the mouse is over the column element the border and the image are displayed however clicking on the image doesn't display the alert.  If I change the style of the image to "display: 'block'" and refresh the page I can click on the image and display the alert however after the image is repositioned as the mouse is moved over a column element clicking the image no longer displays the alert.</p>
  
  <p>Is there an issue with hiding and displaying the image or repositioning it that prevents the click event from triggering?</p>