Unit testing multiple transclusion directive

I have recently added multiple transclusion capability to my application based from http://ift.tt/1S8Eenh

I now have the following ngTransclude directive which works as expected:

(function () {
  'use strict';

  angular
    .module('app.layout')
    .directive('ngTransclude', ngTransclude);

  function ngTransclude() {
    var directive = {
      priority: 1, // run after ng-transclude
      link: link,
      restrict: 'A'
    };
    return directive;

    function link(scope, element, attrs) {
      if (attrs.transcludeFrom) {
        var i,
          child,
          transcludeAs,
          children = element.children();

        for (i = 0; i < children.length; i++) {
          child = angular.element(children[i]);
          transcludeAs = child.attr('transclude-to');
          if (transcludeAs !== attrs.transcludeFrom) {
            child.remove();
          }
        }
      }
    }
  }
})();

I would like to write some tests for the link function in this directive but I am unsure how to proceed.

So lets say I have a directive with transclusion enabled, and added to a page like so:

<my-widget>
    <div transclude-to="chart">chart</div>
    <div transclude-to="filters">filters<div>
</my-widget>

And the template for the my-widget directive has the below in using the transclude from\to attributes:

<md-card>
  <md-card-content ng-transclude transclude-from="chart">
  </md-card-content>
  <md-card-content ng-transclude transclude-from="filters">
  </md-card-content>
</md-card>

What would need to be done in a test spec (I'm using Jasmine) to compile this out so I can somehow get at the link function in the directive for testing?

I have tried using this:

  beforeEach(function() {
    $templateCache.put('app/components/my_widget/my_widget.html', '<div ng-transclude transclude-from="chart">A chart will go here</div><div ng-transclude transclude-from="filters">Filters</div>');
    $scope = $rootScope.$new();
    var html = '<act-dashboard-widget title="some title"><p transclude-to="chart">A chart will go here</p><div transclude-to="filters">Filters</div></act-dashboard-widget>';
    element = $compile(html)($scope);
    $scope.$apply();

  });

But if I console log out the element after its compiled in the beforeEach I get

<act-dashboard-widget title="some title" class="ng-scope"><p transclude-to="chart">I am a chart</p><div transclude-to="filters">I have some filters</div></act-dashboard-widget>

I would expect to see:

<my-widget>
    <md-card>
      <md-card-content ng-transclude transclude-from="chart">
        <p transclude-to="chart">I am a chart</p>
      </md-card-content>
      <md-card-content ng-transclude transclude-from="filters">
        <div transclude-to="filters">I have some filters</div></act-dashboard-widget>
      </md-card-content>
    </md-card>
</my-widget>

Do I need to be doing something in the test to force the transclude to occur? Is this something to do with the priority level assigned to my directive?

I may well be going about this the wrong way, any help is much appreciated.

Thanks!