angularjs - form ng-submit not working with dynamic generated form html

Question

I want to generate multiple forms using "ng-repeat" and bind data to the form. I have already generated the html using angular js directive, but the events are not firing on generated HTML. I think angular js not able to find that HTML into the loaded DOM.

Here is my code on Plunker:

http://plnkr.co/edit/lJsCUqzd1R6xkq1CgXOM?p=preview

After generating the HMTL, I want to submit the form by "ng-submit" directive. I am using angular js version 1.4.1 and my custom directive is

<div custom-form formfor="eng" formforid="1"></div>

Answer 1

Since you are using isolated scope in your directive, the directive does not have access to parent scope function directly. What you can do is to pass the reference of the function to call on submit to directive using syntax:

 scope: {
      formfor: "@",
      formforid: "@",
      formFn:"&"
    },

Then you need to modify the directive usage to

<div custom-form formfor="eng" formforid="1" form-fn="newsForm2()"></div>

The directive template and implementation also need to change.

See my plunkr here http://plnkr.co/edit/Z4tf0Jqi59S8nNLCmH6z?p=preview