angularjs drag and drop html content

I am trying to create a live HTML editor with AngularJS, where user can drag and drop some DOM elements to a container and it will render the final HTML page, for example, there is a button (or whatever) that says "Drag me to create an input", then user will drag that item into the container and an input field will be rendered...

I've been trying ngDraggable module but isn't what I needed...

I think a way is to hold the HTML code into some $scope variable, and when the user drops the button into the container, $scope.input which contains <input type="text" placeholder="Something"/> will be rendered inside container...

My final step is to enable inline edit to thoose HTML elements generated, in order to let the user create some content agains that final template.

When the user finish, the whole HTML code will be saved somewhere or downloaded...

I don't need something complex, just a few predefined elements that can be dropped...

I hope I've explained it correctly.

There is some example found at http://nboychev.com/tests/angular/Drag%20Drop%20iFrame%20using%20Angular%20JS%20Directive.html that does exactly what I want (see source), BUT:

It's using jQueryUI (Which I don't want to use, but if its needed then I will)

It isn't working on my project. I must say that I'm using RequireJS, but everything works on my angular app but the directives mentioned on the link above. Draggable is not working, I do not have any errors and I've checked that the code is being executed, doing some console.log() stuff, but still not working...

But it contains what I want, draggable stuff with HTML injected that renders content on an iframe (or a div, or whatever) and that new content is also droppable, to insert more stuff inside that code. Give it a try, and guide me a little. Thanks