title: Adding ng-click event with jQuery
body: <p>Being new to Angularjs, I need a bit of help with this issue. I am attempting to add ng-click="getGallery(57)" to a modal tab. Adding via jQuery is not the issue, however I realize when I do this, Angular is not compiling the newly added ng-click. I have a simple controller</p>
  
  <pre><code>function imageGalleryCtrl ($scope, $http) {
  
      //get gallery info on click
      $scope.getGallery = function(id)
      {
          $http.post('/beta/images/get_images',{'id': id}).success(function(data)
      {
          $scope.images = data.thisGal_images;
          $scope.images.galID = id;
      });
      };
  
  }
  </code></pre>
  
  <p>I add the ng-click to the element with jQuery</p>
  
  <pre><code>//Edit image tab to use angularjs
  $('#image_edit a').attr('ng-click','getGallery(' + settings.id + ')');
  </code></pre>
  
  <p>How do I force Angular to compile this newly added ng-click?</p>
  
  <p>Thanks!</p>
  
  <p><strong>HTML Modal:</strong></p>
  
  <p>This is the modal that is called when the gallery name is clicked.</p>
  
  <pre><code>&lt;div class="modal fade hide modal-creator" id="imageUploader" tabindex="-1" data-focus-on="input:first"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;/button&gt;
          &lt;h3&gt;Create New Gallery&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
              &lt;ul id="myTab" class="nav nav-tabs"&gt;
                  &lt;li id="image_home" class=""&gt;
                      &lt;a href="#home" data-toggle="tab"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li id="image_upload" class=""&gt;
                      &lt;a href="#upload" data-toggle="tab"&gt;Upload Image Gallery&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li id="image_edit" class=""&gt;
                      &lt;a href="#edit" data-toggle="tab"&gt;Edit Image Gallery&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;div id="myTabContent" class="tab-content"&gt;
  
                  &lt;div class="tab-pane fade in" id="home"&gt;
                      &lt;?php include('create.php'); ?&gt;
                  &lt;/div&gt;
  
                  &lt;div class="tab-pane fade" id="upload"&gt;
                      &lt;?php include('upload.php'); ?&gt;
                  &lt;/div&gt;
  
                  &lt;div class="tab-pane fade" id="edit"&gt;
                      &lt;div class="span9"&gt;
                  &lt;ul id="imageSort" class="gallery-container"&gt;
                  &lt;li ng-repeat="image in images"&gt;
                  &lt;img ng-src="http://images.onlinealbumproofing.com/imageGallery/{{image.galleryID}}/{{image.imageName}}" alt=""&gt;
                  {{image.orgName}}
                  &lt;/li&gt;
                   &lt;/ul&gt;
                 &lt;/div&gt;&lt;!-- /span9 --&gt;
                  &lt;/div&gt;&lt;!-- /row --&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
      &lt;/div&gt;&lt;!-- /modal-body --&gt;
  
      &lt;div class="modal-footer"&gt;
          &lt;a href="javascript:;" class="btn" data-dismiss="modal"&gt;Close&lt;/a&gt;
          &lt;a href="javascript:;" id="next" class="btn btn-primary"&gt;Next&lt;/a&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <h2>Update</h2>
  
  <p>So really attempting to do this the Angular way, and after some studies here is where I am at.
  The controller is the same as above and I have updated the tabs on the modal as follows.</p>
  
  <pre><code>&lt;div class="modal-body"&gt;
              &lt;ul id="myTab" class="nav nav-tabs"&gt;
                  &lt;li id="image_home" class=""&gt;
                      &lt;a href="#home" data-toggle="tab"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li id="image_upload" class=""&gt;
                      &lt;a href="#upload" data-toggle="tab"&gt;Upload Image Gallery&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li id="image_edit" class=""&gt;
                      &lt;a ng-click="getGallery(57)" href="#edit" data-toggle="tab"&gt;Edit Image Gallery&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
  </code></pre>
  
  <p>If I hard code the ng-click as above, the tab updates as expected. What I am trying to make happen, is when the modal is called, (#image_edit a) gets a defined ng-click="getGallery(id). I need to tell Angular to look at the ng-click again for the id.</p>