Need suggestions for creating HTML plugins for web app

I've been learning AngularJS and have been working on a web app to facilitate my understanding.

While a solution to my problem doesn't necessarily have to be focused on AngularJS, it is an option since I'm currently using that framework for my app.

Okay, so the scenario is this: I have a page where a user can supply a blob of text, then they are able to select from a drop-down any number of "transformers" that will alter the supplied text (e.g. remove certain characters, uppercase/lowercase, replace 'this' with 'that', etc. etc).

Now, each of these transformers may require from 0 to any number of user supplied parameters. I've been struggling to think of an elegant solution to this.

Ideas I've come up with are:

1. 
   

   Create a Javascript "transformer" object that allows for an array of parameters and a transform function. Then, for display purposes, dynamically create the label and input elements, and somehow bind those inputs to scope variables. But this ends up convoluted since there can be any number of parameters, plus what if I want drop-down selectors or some other GUI element...

   
   


2. 
   

   Manually create HTML fragments (i.e. the plug-in) for each of the defined transformers and have the fragments load when selected. I think this approach is best since this will allow for flexibility for the GUI display. And all that's really required for each of the plugins is to accept a string and output the result of the transform using the plugin's internal logic. But I am not sure how to encapsulate the Javascript logic into these plugins that would be callable from the (Angular) controller.

   
   

I come from a C# background so if I were to create this in C# I would use an interface like "string GetResult(string data);" and apply this to all my plugins. Just not sure how to do this in the HTML/Javascript world.