title: Load data to form using AngularJS
body: <p>I am trying to load data from a Service to a form but is not binding to the field value the data loaded from the service/server:</p>
  
  <p>The data from service is coming OK, the problem is after setting here in this code, I load a route to my form but the form keeps with the old values, this code is in my controller:</p>
  
  <pre><code>$scope.cadastro = {
      email: '',
      name: 'the name to put in the field',
      city: ''
  };
  
  $scope.editar = function () {
      myAppServices.getUserData($rootScope.uid).then(function (data) {
          if (data !== null) {
              $scope.cadastro = data;
              $scope.cadastro.name = data.name;
              $location.path('cadastro');
          }
      });
  
  };
  </code></pre>
  
  <p>the HTML form:</p>
  
  <pre><code>&lt;form name="myDataForm" class="form-horizontal" role="form"&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="col-sm-5 control-label no-padding-right" for="email"&gt;Email&lt;/label&gt;
          &lt;div class="col-sm-7"&gt;
              &lt;span class="block input-icon input-icon-right"&gt;
                  &lt;input type="text" class="form-control" placeholder="Email" name="email" ng-model="cadastro.email" focus/&gt;
                  &lt;span ng-show="myDataForm.email.$error.email" class="help-inline"&gt;Email is not valid&lt;/span&gt; 
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="col-sm-5 control-label no-padding-right" for="name"&gt;Nome Completo&lt;/label&gt;
          &lt;div class="col-sm-7"&gt;
              &lt;span class="block input-icon input-icon-right"&gt;
                  &lt;input type="text" name="name" class="form-control" placeholder="Nome" ng-model="cadastro.name" /&gt;
                  &lt;small class="errorMessage" data-ng-show="myDataForm.name.$dirty &amp;&amp; myDataForm.name.$error.required"&gt; Informe seu nome completo.&lt;/small&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="col-sm-5 control-label no-padding-right" for="address"&gt;Cidade&lt;/label&gt;
          &lt;div class="col-sm-7"&gt;
              &lt;span class="block input-icon input-icon-right"&gt;
                  &lt;input type="text" class="form-control" placeholder="Cidade" ng-model="cadastro.city" /&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;span class="lbl col-sm-5"&gt; &lt;/span&gt;
          &lt;div class="col-sm-7"&gt;
              &lt;button type="submit" class="width-35 pull-right btn btn-sm btn-primary" ng-click="salvarcadastroForm(cadastro)" data-ng-disabled="myDataForm.$invalid"&gt;
                  &lt;i class="fa fa-floppy-o"&gt;&lt;/i&gt; Save
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>What should I do?</p>
  
  <p><strong>SOLUTION:
  Load user data in a init method in the controller:</strong></p>
  
  <pre><code>$scope.init = function () {
      $scope.reset();
  
      // if user logged then load data
      if ($rootScope.uid !== undefined) {
          myAppServices.getUserData($rootScope.uid).then(function (data) {
              if (data !== null) {
                  $scope.formData = data;
              }
          });
      }
  };
  </code></pre>