Angularjs compile a directive inside ng-repeat with isolated scope -

i have directive in form of dropdown, pretty simple. user can click button add many need in ul, make selections, , save off. inside of several ng-repeats.

i'm having trouble mastering scope. expected, works:

<div ng-repeat="group in groups" question-group="group" class="question-group">   <div ng-repeat="question in questions">     <ul>       <li ng-repeat="case in question.cases"></li>       <li><new-case group='group'></new-case></li>     </ul>   </div> </div> 

when "works", mean group scoped (the data of entire group necessary resulting input).

when switch "click add":

<div ng-repeat="group in groups" question-group="group" class="question-group">   <div ng-repeat="question in questions">     <ul>       <li ng-repeat="case in question.cases"></li>       <li><a href="#" ng-click="createnewcase($event)">add case</a></li>     </ul>   </div> </div> 

group undefined in scope. here createnewcase function:

function createnewcase($event) {   var thisli = angular.element($event.target).closest('li');   var listitem = $compile('<li><new-case group=\'group\'></new-case></li>');   var html = listitem($scope);   thisli.before(html); } $scope.createnewcase = createnewcase; 

and newcase directive:

angular.module('groups.directives.newcasedirective', [])     .directive('newcase', ['$window', function() {         return {           restrict: 'ea',           scope: { group: '=' },           templateurl: 'groups/views/newcase.tpl.html'         };       }]); 

i've been reading days , i've tried few other derivatives i'm not getting it. appreciated.

thanks!

the issue group created ng-repeat , available in child scopes of ng-repeat.

each repeated element in it's own child scope. directive version works other 1 doesn't because controller doesn't see child scopes.

you have pass group argument of function if want access in controller

<a href="#" ng-click="createnewcase($event, group)">