How to include multiple divs in a single directive?

Question

I am trying to include multiple div's in a single directive.But the directive works on only first div and it leaves the other div's inside it.

Template code:

<div actor-check-box  ng-repeat="actor in actors">

    <div  create-connections class="actor\{{$index}}" >
            <span><input class="checkbox-actor" type="checkbox" name="actor-checkbox"  id="actor-checkbox\{{$index}}">\{{actor}}</span>
    </div>

    <div ng-repeat="activity in activities">

        <div ng-if="actor == activity.id">

            <div ng-repeat = "impact in activity.text" >
                <div update-connections class="impact\{{$index}}actor\{{actors.indexOf(actor)}}" actor-id="actor\{{actors.indexOf(actor)}}">
                    <span><input class="checkbox-activity" type="checkbox" name="impact-checkbox" id="activity-checkbox\{{$index}}actor\{{actors.indexOf(actor)}}" activity-check-box>\{{impact}}</span>
                </div>

                <div ng-repeat="feature in features">

                    <div ng-if="actor == feature.id && impact == feature.key">
                        <div feature-connection ng-repeat = "feature in feature.text" class="feature\{{$index}}" activity-id="impact\{{activity.text.indexOf(impact)}}actor\{{actors.indexOf(actor)}}" id="">
                                 <span><input class="checkbox" type="checkbox" name="impact-checkbox" id="" >\{{feature}}</span>
                        </div>
                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

Directive Code:

angular.module('mainModule').directive('actorCheckBox', function($interval) {

    return {
        restrict: 'EA',
        /*transclude: true,*/

        link: function (scope, element, attrs, ctrl) {

            scope.$watch('ngModel', function(newValue){
                /*alert(newValue);*/
                console.log(element.find('input[type="checkbox"]'));
                /*console.log(element.find('input[class="checkbox-actor"]'));*/
                console.log(element.find('input[class="checkbox-activity"]'));
                console.log(attrs);

            });
        }
    }
});

Output In console:

[input#actor-checkbox0.checkbox-actor, prevObject: o.fn.init[1], context: div.ng-scope, selector: "input[type="checkbox"]"]
[input#actor-checkbox1.checkbox-actor, prevObject: o.fn.init[1], context: div.ng-scope, selector: "input[type="checkbox"]"]
[input#actor-checkbox2.checkbox-actor, prevObject: o.fn.init[1], context: div.ng-scope, selector: "input[type="checkbox"]"]

So the problem is I have 3 div's and directive is applied on the first div and 2 more div is inside the main div with checkbox. When the directive is called console only shows the checkbox element in main div not of other 2 div's. Adding the console out from directive as well:

If I inlude transclude: true it removes all the earlier directives on the element and page goes blank.

Answer 1

It's not happening because ng-repeat creates separate scopes for itself. You need to include in on the divs as well or modify your directive to not use isolated scopes.