In AngularJS, I love the two-way data binding that the ngModel directive provides. But, I don't necessarily want the two-way data binding to directly affect all my data. I know that might sound contradictory. But, instead of having ngModel alter my core data, I like to isolate the two-way data binding life-cycle behind a form object that can evolve independently, alongside my core data.
This adds a bit of indirection. But, it's a pattern that I've come to really appreciate. It allows me to play with my form data without having to be concerned about my core data. I can reset the form or update the form based on changes with relative ease. All while leaving the core data completely isolated.
To see this in action, I've created a very simple view / edit demo. When I move into the edit mode, you can see that I copy data into a vm.form object. And, when it's time to process the form, I copy the data out of my vm.form object and back into my core data model.
As you can see, the .editFriend() method moves data into the form object. And then, the .processForm() method moves data out of the form and back into the core data, if necessary.
If you hook your ngModel bindings directly up to your core data, I find that it makes the state of the core data harder to reason about because it can change at any moment. Plus, it makes reverting changes or updating the core model in the background harder since you're directly mutating the core data. By using a intermediary "form" object, I can completely isolate the ngModel-based changes. And, I find this gives me excellent control over how data flows through my controller.
Want to use code from this post? Check out the license.