A directive and provider pair to apply arbitrary JQuery plugins to elements

apply_plugin.js

angular.module( 'ameyms.jqplugin' ).
    directive( 'applyPlugin', [ 'jqueryPlugins', function ( jqPlugins ) {
        var postLinkFn;
        
        postLinkFn = function ( scope, elem, attrs ) {
            var currPlugin = attrs.applyPlugin,
                opts = jqueryPlugins.getOptionsFor( currPlugin );
                
            // Apply plugin
            $( elem )[ currPlugin ]( opts );
        };
        
        return {
            restrict: 'A',
            link: postLinkFn
        };
    } ] 
);

jquery_plugins.js

angular.module( 'ameyms.jqplugin' ).
    provider( 'jqueryPlugins', function () {
        var pluginOptions = {};
        
        this.$get = function () {
            return {
                getOptionsFor: function ( pluginName ) {
                    return pluginOptions[ pluginName ];
                },
                
                setOptions: function ( pluginName, opts ) {
                    pluginOptions[ pluginName ] = opts;
                    return this;
                }
            };
        };
    } );

module.js

angular.module( 'ameyms.jqplugin', [] );

Usage:

In your Javascript:

angular.module( 'mymodule' ,['ameyms.jqplugin'])
angular.module( 'mymodule' ).config(function(jqueryPlugins){
    jqueryPlugins.setOptions('myplugin', {foo: 1, bar: 'Hello, World'});
});

And in your templates:

<div apply-plugin="myplugin"></div>