Angular: Pass ng-repeat Item Into Directive

Question

How do you pass an entire ng-repeat object into a directive (or how to you set a directive's scope to an ng-repeat item)?

I'm new to angular and having a difficult time figuring this out.

I have a controller which renders the following just fine:

<div class="img-wrap" ng-repeat="image in images">
    <p>{{image.title}}</p>
    <img ng-src="{{image.thumbUrl}}" />
</div>

What i would like to do is turn the inside into a directive and pass the image obj into the directive. Here's what i have that does NOT work:

I change the html to:

<div class="img-wrap" ng-repeat="image in images">
  <image />
</div>

And then i have this directive:

angular.module('openart')
.factory('image',  function () {
    return {
        restrict:'E',
        controller:['$scope',function($scope){

        }],
        template:'<p>{{title}}</p><img ng-src="{{thumbUrl}}" />',
        link:function(scope,el,attrs){

        }
    };
});

Answer 1

You have to provide the image object to your directive somehow. For that you need to set it in scope of your directive, something like that:

scope: {image:"="}

Heres a working jsfiddle