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' , { ...