title: Passing data to a custom directive in AngularJS
body: <p>I have a page that displays a bunch of thumbnails of images that are retrieved using http. I use ng-repeat to go through the array and generate the html.<br>
  This works fine.</p>
  
  <p>I also create a custom directive that I tie as an attribute to img elements generated by ng-repeat.<br>
  This also works fine.</p>
  
  <p>However, when I try to pass data to the scope of my custom directive then it all falls apart. Data binding fails, ng-repeat does not replace the url of the images so I end up getting a 404 since the url is invalid. That is pretty much as far as it goes.</p>
  
  <p>Any help is greatly appreciated since I am completely new to Angular.</p>
  
  <p>my html template:</p>
  
  <pre><code>&lt;div class="portfolioContent"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-lg-3 col-md-4 col-sm-4 col-xs-6 col-padding" ng-repeat="gImg in gPhotos"&gt;
          &lt;div class="photoframe"&gt;
                  &lt;img src="{{gImg.thumbnailUrl}}" url="{{gImg.imageUrl}}" image-gallery&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>and my custom directive:</p>
  
  <pre><code>myApp.directive('imageGallery',function(){
  
  return {
      restrict: 'A',
      scope: {
        url: '='
      },
      controller: function($scope){
          console.log($scope.url);
      }
  }
  </code></pre>
  
  <p>});</p>