Recursively including angular directives inside of each other with ng-repeat

Question

I have a case where I need to include a directive inside of itself depending on an ng-if statement and ng-repeat filter, here is the current code:

checkbox.html - directive

<input type="checkbox" ng-model="inputs[field.$id]"> {{field.label}}
<div ng-if="field.needsExplanation">
  <ul>
    <li ng-repeat="field in fields | filter:{choice.explanationID}">
      <checkbox></checkbox>
    </li>
  </ul>
</div>

As you can see I am calling the <checkbox> directive inside of it's own directive (but it is selecting a different field object with an angular ng-repeat filter.)

When I run this it crashes the browser and generates the $rootScope:inprog error message.

Here is how the directive is being created:

app.directive('checkbox', function() {
    return {
        restrict: 'E',
        templateUrl: 'directives/checkbox.html',
        scope: true
    };
});

How can I get it to output properly?

The output would be something like this:

[] Apples

If the checkbox is checked and it requires more details (field.needsExplanation)

[x] Apples
    [] Fiji
    [x] Granny
        [] Cheap
        [] Expensive
    [] Smith