Angular UI Routing (angular-ui-router) problem with '-' in the state name - model is not bound in first load.

Issue:
angular-ui-router confused with state names separated with '-' .
Ex. Sign-up vs Sign-up-user.

Though it loads the template it is not binding the model in the first load. You have to click same link again to get the form fields populated.

Angular-ui- router - almost treating it as sub url path like in " sign-up.user" the URL will be-  'sign-up/user' .

 FIX:
Avoid same prefix separated by '-'.
 Use  some thing like  'signup-user' instead of 'sign-up-user' that repeats the other route 'sign-up'.

Code:
 This below code will not populate the form fields first time.
app.js
 .state('sign-up', { 
        url: '/sign-up',
        templateUrl: 'views/sign-up-options.html'
      })
     .state('sign-up-user', {                
        url: '/sign-up-user',                    -----------------------------> This URL is compared with the previous URL and is still loading and the template and controller, but not binding. It works if changed to '/signup-user'
        templateUrl: 'views/sign-up-user.html',
        controller: 'SignUpController'
      })
 .state('sign-up-success', {
        url: '/sign-up/success',
        templateUrl: 'views/sign-up-success.html'
      });
  
Controller:
 .controller('SignUpController', ['$scope',   '$state',    
      function($scope,  $state ) {
        $scope.user = {
          email: 'user@u.com',
          password: ' password',
            repassword:null
        };
    
        $scope.register = function() {
           console.log('register called');
        };
  }]);

HTML:

<section>
  <form name="form" ng-submit="register()">
    <fieldset>
      <legend>Sign up form</legend>

      <div class="form-group">
        <label>Email</label>
        <input name="email" type="text" ng-model="user.email">
      </div>

      <div class="form-group">
        <label>Password</label>
        <input name="password" type="password" ng-model="user.password">
      </div>

      <div class="actions">
        <label></label>
        <button>Sign up</button>
      </div>
    </fieldset>
  </form>
</section>