Scope data not loading in html template in angularjs

I have login popup and reset password popup in home page. when i click login submit, i will get success ,after success i am calling user api request in success callback, so i will get the user details in template after login success, so it will load the user name in html template, but not from the reset password popup.
in Reset password popup , i have login button, after successfully resets the password. after clicking login button, i am getting success, the console.log inside success callback is showing in console. Since i am calling user api request on success, i am also getting user details in console.log. But the user details is not loading in html template. but after reloading the page, i am getting the user details in html template. I am getting user details, without reload in login popup directly. but not when i reset password and login .
I have the routing like this

 .state('resetPassword', {
                url: '/home/reset_password',
                templateUrl: 'home/home.html',
                controller: 'HomeController',
                controllerAs: 'vm',
                data: {
                    requireLogin: false 
                }
            })
            // UI Router Login
            .state('login', {
                url: '/login',
                templateUrl: 'login/uirouterlogin.html',
                controllerAs: 'vm',
                data: {
                    requireLogin: false 
                }
            })

controller code

through template for parameters i am just passing the resetpassword template and login template. based on which button clicked.

   $scope.showLogin = function(e, template) {
        console.log(template);
        var modalInstance = $uibModal.open({
            animation: true,
            templateUrl: 'login/' + template + '.html',
            'controllerAs': 'login',
            controller: function($uibModalInstance, $scope, logIn) {
                $scope.modalClose = function() {
                    $uibModalInstance.dismiss('Close');
                };
                $scope.loginUser = function(existinguser) {
                    $scope.loginLoading = true;
                    logIn.getlogIn(existinguser)
                        .then(function(success) {
                            $state.reload();
                            $uibModalInstance.dismiss('Close');
                            getApi();  //to get the user details.

                            cartReload();
                            $scope.loginLoading = false;
                            console.log(success.data);
                            $login.getLoginRedirect();
                            $authentication.setAuthKey("key");
                            $scope.loginupError = false;
                        }, function(error) {
                            $scope.loginLoading = false;
                            console.log("Login Failed");
                            $scope.loginError = true;
                            if (error.data) {
                                $scope.loginErrorMsg = error.data.message;
                            } else {
                                $scope.loginErrorMsg = "Error connection, Please try again";
                            }
                            $timeout(function() {
                                $scope.loginError = false;
                            }, 4000);
                        })
                };

*the reset password popup will appears on page load to get that popup i am doing like this *

 $rootScope.$on('$stateChangeSuccess',
        function(event, toState, toParams, fromState, fromParams) {
            if (toState.name === 'resetPassword') {
                $scope.showLogin('$event', 'resetpassword');
            }
            $scope.home_state = toState.name;
        }
    )

html

 <li ng-if="!user"><a ng-click="showLogin($event,'login')">LOGIN</a></li>
<li ng-if="user">user.name</li>