Q:

How to avoid accessing scope.$parent inside a directive inside ng-repeat

I have built a customized directive 
Here is my directive
angular.module('app')
.directive("pdf", function() {
  return {
    restrict: 'E',
    scope: {
      page: '=',
      pdfDoc: '='
    },
    link : function(scope, element, attributes, vm){
      console.log(scope.$parent.pdfDoc)
      scope.page.doc = scope.$parent.pdfDoc;
      console.log(scope);

      vm.renderPage(scope.page.doc, scope.page.id, scope.page.num, scope.page.rotation);

    },
    templateUrl: 'components/pdfViewer/views/pdfViewer.directive.html',
    controller: pdfViewerController,
    controllerAs: 'vm',
  }
});

Here is my parent controller's html
<div class="thumbnail vthumbnail" ng-repeat="page in pages" data-drop="true" data-drag="true" ng-model="pages" jqyoui-droppable="{index: {{$index}}}" jqyoui-draggable="{index: {{$index}}, insertInline: true, direction:'jqyouiDirection'}" data-jqyoui-options="{revert: 'invalid'}" data-direction="{{page.jqyouiDirection}}" ng-init="doc = pdfDoc">

<pdf page="page" pdfDoc="doc"></pdf> 
</div>

My question is how to assign pdfDoc, which is in the scope of the parent controller, to the directive pdf. It looks like the ng-repeat created its own scope. I tried with ng-init="doc=pdfDoc" but I cannot access doc in 
<pdf page="page" pdfDoc="doc"></pdf>. 

The only solution I have come up with now is using scope.$parent in the directive. However, it's not a clean solution if I want to make the directive pdf moduler.
Do you guys know how to pass parent controller's scope.variable into the directive inside ng-repeat?

A:

Angular converts camelCasing to snake-casing, so rename pdfDoc to pdf-doc in the DOM
<pdf page="page" pdf-doc="doc"></pdf>. 

