javascript - binding not refreshing in angularjs -

i'm using angularjs , need update content of html after user logged in. in fact html load controller once when load page, meaning when user not yet logged. after login html did not refresh page display user's login? how can fix that. below html

<section class="hero hero-1 hero-small" ng-controller="homecontroller">      <header class="navbar" role="navigation">         <div class="container" ng-controller="usercontroller">             {{username}}             <nav>                 <a class="navbar--logo" ui-sref="home">espritacademy</a>             </nav>             <nav>                 <ul class="navbar--list pull-right">                     <li class="navbar--list-item"><a ui-sref="#">features</a></li>                     <li class="navbar--list-item"><a ui-sref="#">courses</a></li>                     <li class="navbar--list-item" ng-hide="isloggedin()"><a                         ui-sref="login">sign in</a></li>                      <li class="navbar--list-item dropdown"                         ng-controller="dropdownctrl" dropdown is-open="status.isopen"                         ng-show="isloggedin()"><a ui-sref="#"                         class="dropdown-toggle" data-toggle="dropdown" dropdown-toggle                         ng-disabled="disabled"> <b>{{username}}</b><b class="caret"></b>                     </a>                         <ul class="dropdown-menu" style="left: inherit; right: 0;">                             <li><a ui-sref="#">my profile</a></li>                             <li><a ui-sref="#">account settings</a></li>                             <li ng-click="logout()"><a ui-sref="home">logout</a></li>                         </ul></li>                     <!-- <li class="navbar--list-item" ng-click="logout()"                         ng-show="isloggedin()"><a ui-sref="home">déconnexion</a></li> -->                      <li class="navbar--list-item" ng-hide="isloggedin()"><a                         class="rounded-button blue-button" ui-sref="register">start                             learning</a></li>                 </ul>             </nav>         </div>     </header> </section> 

and controller:

controller(             "homecontroller",             function homecontroller($scope, sessionservice) {                 $scope.isloggedin = sessionservice.isloggedin;                 $scope.logout = sessionservice.logout;             }).controller(                     "usercontroller",                     function usercontroller($scope, accountservice) {                         console.log("hello");                         var loggeduser = {};                         loggeduser = accountservice.getuser();                         if ((loggeduser)) {                             $scope.username = loggeduser.username;                             console.log("username : ", $scope.username);                         }                     }).controller('dropdownctrl',             function($scope, $log) {                 $scope.status = {                     isopen : false                 };                  $scope.toggled = function(open) {                 };             }); 

the problem i'm facing display of {{username}}. below factory used user details using rest technology java back-end.

factory(             'accountservice',             function($resource, sessionservice) {                 var service = {};                 service.register = function(account, profile, success,                         failure) {                     if (profile.id == 1) {                         var account = $resource("/rest/account");                         account.save({}, account, success, failure);                     } else {                         var account = $resource("/rest/account/teacher");                         account.save({}, account, success, failure);                     }                 };                 service.userexists = function(account, success, failure) {                     var account = $resource("/rest/account");                     var data = account.get({                         username : account.username,                         password : account.password                     }, function() {                         console.log("user details : ", data);                         var accounts = data.username;                         if (accounts && accounts.length !== 0) {                             console                                     .log("profile id :",                                             data.userprofile.id);                             service.data = data;                             success(account);                         } else {                             failure();                         }                     }, failure);                 };                 service.getuser = function() {                     return service.data;                 };                 return service;             }) 

i don't need keep refreshing page need load usercontroller after user login. possible ng-if or other way?

i think have instantiate user controller when user logged in, not case.

try changing this

<div class="container" ng-controller="usercontroller"> 

to this

<div class="container" ng-controller="usercontroller" ng-if="isloggedin()">