AngularJs Tooltip with html content directive

Tooltip.js

/*jshint bitwise:true, camelcase:true, curly:true, eqeqeq:true, forin:true, latedef:true, newcap:true, noarg:true,
 noempty:true, nonew:true, undef:true, unused:true, strict:true, browser:true, camelcase:false */

/*globals
 $: false
 */

/*exported
 ToolTipDirective
 */

// needs to be made generic at some point
var ToolTipDirective = function ($compile) {
    "use strict";

    return {
        link: function (scope, element) {
            var el = $(element),
                template = el.find('script.template').html(),
                title = '';

            if (template) {
                title = $compile(template)(scope);
            } else {
                title = el.attr('title');
            }

            el.tooltip({
                title: title,
                placement: "right"
            });
        }
    };
};

ToolTipDirective.$inject = ['$compile'];