title: AngularJS bind $scope data to form
body: <p>I have a $rootScope variable:</p>
  
  <pre><code>$rootScope.register_data = {};
  </code></pre>
  
  <p>I have a view which contains a form:</p>
  
  <pre><code>&lt;form name="register_data"&gt;
      &lt;div class="popup signup"&gt;
          &lt;div class="social"&gt;
              &lt;a ng-controller="FacebookCtrl" ng-click="login()" href="javascript:void(0)" class="facebook fb-login-button"&gt;Sign up with Facebook&lt;/a&gt;
              &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="userinfo"&gt;
              &lt;div class="left"&gt;&lt;input type="text" ng-model="register_data.firstname" placeholder="First Name" tabindex="1" required&gt;&lt;/div&gt;
              &lt;div class="right"&gt;&lt;input type="text" ng-model="register_data.email" placeholder="Email Address" tabindex="4" required&gt;&lt;/div&gt;
  
              &lt;div class="left"&gt;&lt;input type="text" ng-model="register_data.lastname" placeholder="Last Name" tabindex="2" required&gt;&lt;/div&gt;
              &lt;div class="right optional"&gt;&lt;div class="tip"&gt;optional&lt;/div&gt;&lt;input type="text" ng-model="register_data.dob" tabindex="5" placeholder="DoB (dd/mm/yyyy)"&gt;&lt;/div&gt;
  
              &lt;div class="left"&gt;&lt;input type="text" ng-model="register_data.phone" placeholder="Phone Number" tabindex="3" required&gt;&lt;/div&gt;
              &lt;div class="right password"&gt;&lt;a href="javascript:void(0)" class="picker"&gt;&amp;nbsp;&lt;/a&gt;&lt;input type="password" ng-model="register_data.password" placeholder="Password" tabindex="6" required&gt;&lt;/div&gt;
              &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="control"&gt;
              &lt;span class="terms"&gt;I agree to the &lt;a href="javascript:void(0)"&gt;terms &amp;amp; conditions&lt;/a&gt;&lt;/span&gt;
              &lt;a href="javascript:void(0)" id="terms_checkbox" class="checkbox" ng-class="{checked : terms_checked}" ng-click="changeTerms()"&gt;&amp;nbsp;&lt;/a&gt;
              &lt;a href="javascript:void(0)" class="button" id="register_btn" ng-click="doRegister(register_data)"&gt;Sign up&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The form has a name <code>register_data</code> and each field is bound to that via ng-model. It seems to overwrite my <code>$rootScope.register_data</code> variable as when I update that none of the form controls update. Though if I remove the form name then it works. However i need the form name to do proper form validation.</p>
  
  <p>Anyone know how I can bind the form controls to a scope object but also keep the form validation?</p>