How do I add a transclusion to an existing Angular attribute directive?

Question

I've gone through similar questions and I guess I'm still not understanding how this is supposed to work.

I have the following directive that I want to modify to allow transclusion:

app.directive('ccWidgetHeader', function() {
    var directive = {
        link: link,
        scope: {
            'title': '@',
            'subtitle': '@',
            'rightText': '@',
            'allowCollapse': '@'
        },
        templateUrl: '/app/layout/widgetheader.html',
        restrict: 'A',
    };
    return directive;

    function link(scope, element, attrs, ctrl, trans) {
        attrs.$set('class', 'widget-head');
    }
});

The template looks similar to this (there is more but I removed for brevity):

<div class="page-title pull-left">{{title}}</div>

And the HTML I'm using is this:

<div data-cc-widget-header title="Last 20 Jobs"
                            allow-collapse="true">
   <span>I want the content here included in my template!</span>
</div>

I thought I'd be able to just add "transclude: true" to the directive then modify the template like this:

<div class="page-title pull-left">{{title}}<<ng-transclude></ng-transclude></div>

Here's what I'd like to have rendered:

<div data-cc-widget-header="" title="Last 20 Jobs" allow-collapse="true" class="widget-head"><div class="page-title pull-left ng-binding">Last 20 Jobs
<span>I want the content here included in my template! </span>
</div>

Of course, that doesn't seem to work. The examples I've been able to find all show transclusion with restrict of 'E'.

EDIT: It appears it was related to the version of Angular I was running (1.2.X). I upgraded to 1.3.7 and it suddenly started working.