dynamically load interfaces, using angularJS: 2-way binding breaks

Question

I'm trying to build web app that dynamically load interfaces, using angularJS.

I found that it was possible to bootstrap some portions of my code after the initial bootstrap of Angular (HTML template + Controller). My problem is that, doing so, the 2-way data-binding doesn't work. See for yourself:

http://plnkr.co/edit/MtAWP6

Any idea? Am I seeking for something to do the wrong way?

Thanks!

Answer 1

Your problem isn't a bootstraping one (although you really shouldn't be using bootstrap to instantiate a controller, but rather $compile, imo - see this answer). It is a scope problem. You define a "mymodel" model in your controller, but then define it again in your form, for which angular automatically creates it's own scope. While the form's scope inherits from the parent scope, and thus seems to be "binding" the model, the inverse doesn't happen.

You need to either establish a binding between both scopes (or $watch the form's variable, or define the for in the surronding controller), or just assign the controller you want to the form, directly.

See your problem exposed here (see that while your $timeout changes both models, manually setting the model only changes one)

See it resolved here (by basically assigning your controller to the generated form, rather than to a enclosing div of said form)

Answer 2

I think maybe you should take another look at routing/ deep linking. You should be able to specify both a template url and a controller.

Check out this video

And the api docs