Q:

AngularJS: How to expose directive's method to nested directives, like ng-click?

I've read the most of similar topics, but my question is still unanswered.
I hava  directive:
directive.repeatable = function () { return {
    restrict: 'A',
    scope: {
        data: '=repeatableData',
        add: '@'
    },
    controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
        $scope.add = function() {
            console.log("ADD");
        }

    }]
}

I need to have an isolated scope and yet need to expose and add method to nested DOM elements:
<div repeatable repeatable-data="data">
    <div ng-repeat="item in data">
      {{ item }}
    </div>
    <button ng-click="add()">Add</button>
</div>

How can I access add() method of parent directive? Tried: $parent.add(), $scope.$parent.add(), add: '&add'. But I guess I just don't get it.
P.S. I cannot really access the data property of the repeatable directive, instead, both repeatable-data and item in data point to the same "model".

A:

UPDATE
Check my other answer: Why I can't access the right scope?
If you really want the inner content to be part of the isolated scope you can do it like so:
app.directive('repeatable', function () { 
  return {
    restrict: 'A',
    transclude: true,
    scope: {
        data: '=repeatableData',
        add: '@'
    },
    link: function(scope, elm, attr, ctrl, $transclude) {

      $transclude(scope, function(clone){
        elm.append(clone);
      });

      scope.add = function() {
          console.log("ADD");
      }

    }

  }  
});

