javascript - angularjs: losing scope between 2 directives -

i'm pretty new angularjs , having scope-losing issue in project. simplified project minimum, in order focus on problem.

i'm having "overlay" directive, appears html tag in code, render popup. inside overlay, i'd have list of various inputs, "inputs" array in model, should render textboxes, dropdowns, checkboxes, etc. according parameter named "type" in model. html simple this:

<div ng-app="jsf">     <div ng-controller="myctrl">         <overlay inputs="inputs">             <div ng-repeat="input in inputs">                 {{input.type}}:                  <userinput input="input">                  </userinput>             </div>         </overlay>     </div> </div> 

my directives following:

.directive('overlay', function () {         return {             restrict: 'e',             transclude: true,             scope: {                 inputs: '='             },             template: '<div>this overlay ...</div> <div ng-transclude></div> <div> ...my overlay has ended </div>'         };     })  .directive('userinput', function () {         return {             restrict: 'e',             scope: {                 input: '='             },             template: '<div style="border: 1px solid black;">' + '<div style="background-color: gray">{{input.parameter}}</div > ' + '</div>'         };     }) 

and controller putting values inside "inputs" array:

  .controller('myctrl', function ($scope) {          $scope.inputs = [{             type: 'textbox',             parameter: 'myvalue'         }, {             type: 'checkbox',             parameter: true         }];     }); 

the output of code is:

this overlay ... textbox: checkbox: ...my overlay has ended

whereas i'd expect see input "parameter" values after "textbox" , "checkbox". so, 2 questions following:

1) have done wrong in trying inherit scope overlay userinput directive? 2) more advanced, it's objective: best way dynamically render different template "userinput", depending on "type" value of "input" variable?

i have jsfiddle shows problem here: http://jsfiddle.net/4fvkm/1/

thanks in advance who'll try me out

pietro

you created directive called userinput, tried using <userinput> when you're supposed use <user-input>.

much how there's directive called ngrepeat used ng-repeat="x in x".