Can't store data of a multi step form built using Angular.js UI Router

Question

I can't store the data user enters on my form. It is multistep form, with each section included as a view using Angular UI router. I have logged the object that is supposed to store data, but it is empty.

var app = angular.module("Signup", ['ui.router', "ngAnimate"]);

app.config(function($stateProvider,$urlRouterProvider) {
  $urlRouterProvider.otherwise('/index/signup');
  $stateProvider
  .state('index', {
    url: '/index',
    templateUrl: 'index.html',
    controller: 'FormCtrl'
  })
  .state('index.signup', {
    url: '/signup',
    templateUrl: 'views/signup.html',
    controller: 'FormCtrl'
  })
  .state('index.otp', {
    url: '/otp',
    templateUrl: 'views/otp.html',
    controller: 'FormCtrl'
  })
  .state('index.password', {
    url: '/password',
    templateUrl: 'views/password.html',
    controller: 'FormCtrl'
  })
  .state('index.identity', {
    url: '/identity',
    templateUrl: 'views/identity.html',
    controller: 'FormCtrl'
  })
  .state('index.done', {
    url: '/done',
    templateUrl: 'views/done.html',
    controller: 'FormCtrl'
  });
});

app.controller("FormCtrl", ["$scope", "$location", "$window", "dataService", function($scope, $location, $window, dataService) {
    $scope.newuser = dataService.newuser;
    if(document.getElementById('showPswd')) {
      document.getElementById('showPswd').addEventListener("click", function() {
          var pwd = document.getElementById("newPassword");
          if (pwd.getAttribute("type") === "password") {
              pwd.setAttribute("type", "text");
          } else {
              pwd.setAttribute("type", "password");
          }
      });
    }
    if(document.getElementById('last')) {
      console.log(dataService.newuser.firstname);
          setTimeout(function() {
            $window.open('http://www.ayushdevelops.com/');
          }, 10000);
    }

    $scope.go = function(path) {
      $location.path(path);
    };
}]);

app.factory('dataService', function() {
  return {
    newuser: {}
  };
});

I don't want to populate this page with all of my views, hence I am posting just one.

        <div id="wrapper-signup">
      <h1>Borrower Signup</h1>
      <p>Register and start borrowing money online.</p>

      <div class="element-wrap">
        <label>NAME<br>
          <div class="name-wrap">
            <input type="text" ng-model="newuser.firstname" name="firstname" id="firstname" value="" placeholder="First Name">
            <input type="text" ng-model="newuser.lastname" name="lastname" id="lastname" value="" placeholder="Last Name">
          </div>
        </label><br>
      </div>
      <div class="element-wrap">
          <label for="email">EMAIL
            <div class="email-num-wrap">
              <span class="awesome-icon"><i class="fa fa-envelope-o fa-lg email-icon" aria-hidden="true"></i></span><input type="email" id="email" ng-model="newuser.email" name="email" value="" placeholder="Email ID" required>
            </div>
            <p class="error" style="color: red; font-size: 0.8em;" ng-show="signForm.email.$invalid && signForm.email.$dirty">Enter a valid email</p>
          </label>
      </div>
      <div class="element-wrap">
        <label>MOBILE NUMBER
          <div class="email-num-wrap">
            <span class="awesome-icon"><i class="fa fa-mobile fa-2x mobile-icon" aria-hidden="true"></i></span><input type="number" id="number" ng-model="newuser.number" name="mobile-number" value="" placeholder="Enter 10 digit number">
          </div>
        </label>
      </div>
      <div class="clear">
        &nbsp;
      </div>
      <div class="checkbox-wrap">
      <input type="checkbox" class="checkbox" name="terms" value="" ng-model="tcheck" required><p class="checkbox-text">I have read and agree to the <a href="#">Privacy Policy</a>, <a href="#">Terms of Use</a> and consent to Electronic Disclosures.</p>
      </div>
      <div class="checkbox-wrap">
        <input type="checkbox" class="checkbox" name="condiiton" value="" ng-model="ccheck" required><p class="checkbox-text">I authorize RupaiyaExchange to share my details with other Financial Institutions for credit card check and faster processing of loan.</p>
      </div>
      <a ui-sref='index.otp' ng-show="signForm.email.$valid && tcheck && ccheck" class="submit-signup">SIGNUP</a>

    </div>

Answer 1

Each view reinitialize FormCtrl and it's scope so you will have data from only the last view 'Done', I assume that the last view does not provide any data that's why the model is empty, try to store data in rootScope

Answer 2

Are you perhaps binding your model to properties which are undefined? Is that ok for ng-model?

Try setting each of the properties in your factory, and see if that helps.

eg:

app.factory('dataService', function() {
  return {
    newuser: {
       firstName: '',
       lastName: ''
    }
  };
});