DOM javascript doesn't work in angular ng-repeat scope

Question

The javascript code's function: when you click the pic, it bigger pic comes out. But it doesn't work in the ng-repeat. And it works fine out of the ng-repeat.

<div class="col-xs-12 col-sm-9">
    <h2>Famous Actors</h2>
      <ul class="media-list">
         <!--works fine in here-->
           <img class="movie-img media-object img-thumbnail" ng-src="{{actors[0].image}}" width="120px">
           <li class="media" ng-repeat="actor in actors">
           <div class="media-left">
              <!--doesn't work in here-->
              <img class="movie-img media-object img-thumbnail" ng-src="{{actor.image}}" width="120px">
           </div>
           <div class="media-body">
              <h3 class="media-heading">{{actor.name}}</h3>
              <p>{{actor.description}}</p>
           </div>
          </li>
     </ul>
</div>
$(".movie-img").click(function() {
    console.log("clicked!");
    var span = document.createElement("span");
    span.className = "close-x";
    span.appendChild(document.createTextNode("X"));

    var img = document.createElement("img");
    img.className = "img-thumbnail";
    img.src = $(".movie-img")[0].src;

    var div = document.createElement("div");
    div.className = "full-image";

    div.appendChild(img);
    div.appendChild(span);
    $(this).parent().append(div);

    $(".close-x").click(function() {
        $(".full-image").remove();
    });   
 });