title: How to display image in large size onmouseover inside a dynamic div?
body: <p>I am trying to make a simple photo gallery in angularJS. Below is the code</p>
  
  <h2>index.html</h2>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html &gt;
  &lt;head&gt; 
      &lt;title&gt;&lt;/title&gt; 
  
      &lt;script src="http://code.angularjs.org/1.2.0rc1/angular.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="test.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body ng-app="testModule" ng-controller="testCtrl"&gt;
      &lt;div style="width: 60%; margin: 0 auto;"&gt;         
          &lt;div id="dp"&gt;&lt;/div&gt;
      &lt;/div&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>test.js (Controller)</h2>
  
  <pre><code>function testMe(imgSrc) {
      alert(imgSrc);
  }
  
  angular
      .module('testModule', [])
      .controller('testCtrl', function($scope) {
          var photoSource = [
              ["images/ph1.jpg", "images/ph2.jpg"],
              ["images/ph5.jpg", "images/ph6.jpg"]
          ];
          var body = "&lt;table&gt;";
          var row = 2;
          var col = 2;
          for (var i = 0; i &lt; row; i++) {
              body += "&lt;tr&gt;";
              for (var j = 0; j &lt; col; j++) {
                  body += "&lt;td&gt; &lt;img id='" + i + j + "' src='" + photoSource[i][j] + "' onmouseover=testMe('" + photoSource[i][j] + "');&gt;&lt;/td&gt;";
              }
              body += "&lt;/tr&gt;";
          }
          body += "&lt;/table&gt;";
          console.log(body);
          $("#dp").html(body);
      });
  </code></pre>
  
  <p>The problem is that, when the mouse is over an image I want to display that image in the center on a div tag. But this portion I could not achieve. </p>