title: Angularjs - how to load images/videos after clicking on its title
body: <p>I wrote a directive which opens hidden details when user clicks the title, but I'm not sure what is the best strategy to load images using angular directive. I'd like to only load images(array) and videos if user clicks on its title. I don't want to preload images/videos.</p>
  
  <p>I have created a jsfiddle.</p>
  
  <p><a href="http://jsfiddle.net/ZdyP2/9/" rel="nofollow">http://jsfiddle.net/ZdyP2/9/</a></p>
  
  <pre><code>&lt;body ng-app="App"&gt;
      &lt;div ng-controller="MoviesCtrl"&gt;
          &lt;div ng-repeat="movie in movies" data-movies&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;script&gt;
      angular.module('App', []).
      // sample data     
      controller('MoviesCtrl', function($scope){
          $scope.movies =[
              {
               'title': 'Despicable Me 2',
               'images':['http://upload.wikimedia.org/wikipedia/en/d/db/Despicable_Me_Poster.jpg',     'http://intl.despicableme.com/splashpage/images/centergraphic.jpg'],
               'video': 'XQG89cwhmJU'
               },
              {
               'title': ' Monsters University',
               'images': ['http://upload.wikimedia.org/wikipedia/en/2/2a/Monsters_University_poster_3.jpg'],
               'video': 'ODePHkWSg-U'
               }        
             ]
      }).
      directive('movies', function(){
          return {
              template: '{{movie.title}}'+
                  '&lt;div class="movieInfo"&gt;&lt;h2&gt;{{movie.title}}&lt;/h2&gt;' +
                  '&lt;img src="{{image}}" ng-repeat="image in movie.images"&gt;&lt;br&gt;' +
                  '&lt;iframe src="http://www.youtube.com/embed/{{movie.video}}"&gt;&lt;/iframe&gt;&lt;/div&gt;',
              link: function(scope, elem, attrs){ 
                  elem.bind('click', function(){
                      // load image/video now
                      elem.find('.movieInfo').toggle();
                  })
              }
          }  
      })
  &lt;/script&gt;
  </code></pre>