title: Basic Save form data the Angular way
body: <p>I am trying to figure out the "correct" way to get and set form data using Angular. (By "correct" I mean one that supports scalability to larger apps, where controllers aren't overly simple, with shortcut references, as they are in most demos.) When I look though the examples, the seem so basic (such as no controllerAs specifier) that I can't figure out what's pointing at what.</p>
  
  <p>Anyway, I'm expecting that there is an object somewhere in my viewmodel, accessible by the controller, that contains the data in its named fields, suitable for PUTing to the api - and <strong>doesn't</strong> contain all the cruft that is associated with the actual form and field objects:</p>
  
  <p>To-wit: this is what settingsVm.settingsForm contains:</p>
  
  <pre><code>$dirty:true
  $error:{}
  $invalid:false
  $name:"settingsVm.settingsForm"
  $pristine:false
  $submitted:true
  $valid:true
  Email:"asdsa@asdsad.com"
  Id:{$validators: {}, $asyncValidators: {}, $parsers: [], $formatters: [], $viewChangeListeners: [],…}
  $asyncValidators:{}
  $dirty:false
  $error:{}
  $formatters:[]
  $invalid:false
  $name:"Id"
  $options:null
  $parsers:[]
  $pristine:true
  $touched:false
  $untouched:true
  $valid:true
  $validators:{}
  $viewChangeListeners:[]
  StreetDirection:""
  StreetName:"asdasdsadsada"
  StreetNumber:"34"
  Suite:""
  </code></pre>
  
  <p>Here is my form, with just a couple of fields:
      </p>
  
  <pre><code>        &lt;input type="hidden" name="Id" ng-model="settingsVm.settings.Id" /&gt;
  
          &lt;div class="form-group row"&gt;
              &lt;label for="Email" class="col-sm-1 col-form-label text-right"&gt; Email:&lt;/label&gt;
              &lt;div class="col-sm-5"&gt;
                  &lt;input type="text" class="form-control form-group-med" maxlength="50" name="Email" ng-model="settingsVm.settingsForm.Email" required /&gt;
                  &lt;div class="error-message" ng-show="settingsVm.settingsForm.Email.$invalid &amp;&amp; settingsVm.settingsForm.Email.$touched || settingsVm.settingsForm.submitted"&gt;
                      &lt;span ng-show="settingsVm.settingsForm.Email.$error.required"&gt; Email is required.&lt;/span &gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="form-group row"&gt;
              &lt;label for="StreetName" class="col-sm-1 col-form-label text-right"&gt; Name:&lt;/label&gt;
              &lt;div class="col-sm-5"&gt;
                  &lt;input type="text" class="form-control form-group-med" maxlength="50" name="Email" ng-model="settingsVm.settingsForm.StreetName" required /&gt;
                  &lt;div class="error-message" ng-show="settingsVm.settingsForm.StreetName.$invalid &amp;&amp; settingsVm.settingsForm.StreetName.$touched || listingVm.submitted"&gt;
                      &lt;span ng-show="settingsVm.settingsForm.StreetName.$error.required"&gt;Street Name is required.&lt;/span &gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;            
  &lt;/form&gt;
  </code></pre>
  
  <p>Am I using the ng-model correctly? And am I using the $error correctly?</p>
  
  <p>Should my <strong>model</strong> be a distinct object from my <strong>form</strong>? Maybe my model should point at settingsVm.settingsData instead of settingsVm.settingsForm.</p>
  
  <p>Here is my submit: </p>
  
  <pre><code>    vm.submit = function (isValid) {
          vm.submitted = true;
  
          if (isValid) {
              settingsService.putSettings(vm.settingsForm);
          }
      };
  </code></pre>