javascript - How to correctly pass an object to a custom directive? -

i have "simple" goal: have kind of form creator, , directive expected "render" content of form.

for that, created custom directive planing pass object , create logic rendering trough templates. however, failing pass object custom directive

html:

<div ng-controller="mycontroller">      <p>components starts</p>     <div ng-repeat="item in items">         <!-- <p>{{item}}</p> -->         <my-component obj="item" ></my-component>     </div>     <p>components ends</p>  </div> 

js

angular.module('myapp', []) .controller('mycontroller', function($scope) {      $scope.items = [         { type: 'textarea', data: 'somedata1', mandatory: true },         { type: 'list', data: 'somedata2', mandatory: false },         { type: 'select', data: 'somedata3', mandatory: true }];  }) .directive('mycomponent', function() {     return {           restric: 'e',         scope: { obj: '=obj' },         template: '<div> template {{obj.type}} </div>'     }; }); 

i have made , changed code many times different examples got on web, after 2 days not able make work (yes, shameful)

here fiddle link

i know issue when passing directive, because if remove comment tag ng-repeat, data show correctly, if try use directive not work.

please, can me , explain me why not working , missing?

thanks providing jsfiddle. i'm not sure have spotted problem without it.

turns out misspelling restrict (you left off 't' @ end), , needed leave out reference scope in view.

check out updated (and working) fiddle here.