angularjs-bindng-click从jquery动态加载DOM

我有一个ng控制器PostsListController来控制加载图像的ng-click

  <div ng-controller='PostsListController'>
   <ul id="wookmark_container">
    <% @posts.each do |post|%>
     <li>
        <a href='#' ng-click="open()"> <img src="image_path" ></a>
     </li>
     <%end%>
   </ul>
  </div>

angular.module('myapp')
  .controller('PostsListController',  function($scope, $http){
    $scope.open = function(postId){
    };
  };
});

  <script type="text/javascript">
    (function ($) {
      var container = '#wookmark_container',
      $container = $(container),
      tileCount = 30,
      $window = $(window),
      $document = $(document),
      wookmark;
  // Initialize Wookmark
  wookmark = new Wookmark(container, {
    offset: 5, // Optional, the distance between grid items
    outerOffset: 10, // Optional, the distance to the containers border
    itemWidth: 260 // Optional, the width of a grid item
  });
      function onScroll() {
        var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix
            closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100);
        if (closeToBottom) {
          var $items = $('li', $container),
              $firstTen = $items.slice(0, 10).clone().css('opacity', 0);
          $container.append($firstTen);
          wookmark.initItems();
          wookmark.layout(true, function () {
            // Fade in items after layout
            setTimeout(function() {
              $firstTen.css('opacity', 1);
            }, 300);
          });
        }
      };
      // Capture scroll event.
      $window.bind('scroll.wookmark', onScroll);
    })(jQuery);
  </script>

更新的脚本

html部分添加scroll

<ul scroll id="wookmark_container" style="position: relative">

  angular.module('bidwars').directive("scroll", function ($window) {
      return function(scope, element, attrs) {
          angular.element($window).bind("scroll", function() {
              scope.$apply(function(){
                  // write your jquery logic here
                  var container = '#wookmark_container',
                      $container = $(container),
                      tileCount = 30,
                      $window = $(window),
                      $document = $(document),
                      wookmark;
                  // Initialize Wookmark
                  wookmark = new Wookmark(container, {
                    offset: 5, // Optional, the distance between grid items
                    outerOffset: 10, // Optional, the distance to the containers border
                    itemWidth: 260 // Optional, the width of a grid item
                  });
                  var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix
                      closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100);
                  if (closeToBottom) {
                    // Get the first then items from the grid, clone them, and add them to the bottom of the grid
                    var $items = $('li', $container),
                        $firstTen = $items.slice(0, 10).clone().css('opacity', 0);
                    $container.append($firstTen);
                    wookmark.initItems();
                    wookmark.layout(true, function () {
                      // Fade in items after layout
                      setTimeout(function() {
                        $firstTen.css('opacity', 1);
                      }, 300);
                    });
                  }
              });
          });
      };
  });

    (function ($) {
      var container = '#wookmark_container',
          $container = $(container),
          tileCount = 30,
          $window = $(window),
          $document = $(document),
          wookmark;
      // Initialize Wookmark
      wookmark = new Wookmark(container, {
        offset: 5, // Optional, the distance between grid items
        outerOffset: 10, // Optional, the distance to the containers border
        itemWidth: 260 // Optional, the width of a grid item
      });
    })(jQuery);

它适用于在初始页面加载时加载的所有图像。但是当我使用jquery将更多的图像加载到wookmark_container时。ng-click不适用于jquery中新加载的图像。我的猜测是ng控制器没有意识到这些来自jquery的新加载图像。

我如何让ng控制器现在从jquery加载这些新的？如何使动态加载的图像的ng-click事件工作？