title: AngularJS share session data between controllers of different partial views?
body: <p>I'm new to AngularJS and i don't know whether i'm doing things here right. I have a welcome and a login page. I would like to be able to login on the login page and then be logged on any page of my application. I'm aware that localStorage or cookies would be better than the service to store session data, but i wanted to try this out. When I connect the user using my service in the login partial view, the session variables of the controllers aren't updated. Why?</p>
  
  <p>I guess the issue is quite simple to fix and due to the fact that i missed something.</p>
  
  <p>Thank you in advance for your time.</p>
  
  <p>Harald</p>
  
  <p>Here comes the code:</p>
  
  <p>Template html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" ng-app="myApp"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Yahoo 2014 - Welcome&lt;/title&gt;
  
    &lt;link rel="icon" type="image/png" href="img/favicon.png"&gt;
  
    &lt;link rel="stylesheet" href="css/app.css"&gt;
    &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
    &lt;link rel="stylesheet" href="css/animations.css"&gt;
    &lt;link rel="stylesheet" href="css/template.css"&gt;
  
    &lt;script src="lib/jquery/jquery-1.10.2.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body ng-controller="AppCtrl"&gt;
  
    &lt;header&gt;
    &lt;nav role="navigation" class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container-fluid"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col xs-12 col-sm-12 col-md-12 col-lg-12"&gt;
            &lt;div class="navbar-header"&gt;
              &lt;button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"&gt;&lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;/button&gt;&lt;a href="index.html"&gt;&lt;img src="img/logo.png" alt="Yahoo logo" class="img-responsive navbar-brand"/&gt;&lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="collapse navbar-collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                &lt;li&gt;&lt;a href="#/group"&gt;Groupe&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="services.html"&gt;Services&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="software.html"&gt;Logiciels&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="sectors.html"&gt;Secteurs&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="join_us.html"&gt;Rejoignez-nous&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="investors.html"&gt;Investisseurs&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="http://www.yahoo.com/"&gt;English version&lt;/a&gt;&lt;/li&gt;
                &lt;li ng-hide="connected" &gt;&lt;a href="#/login"&gt;Login&lt;/a&gt;&lt;/li&gt;
                &lt;li ng-hide="!connected"&gt;&lt;a href="#/profile" ng-bind="nickname"&gt; &lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
    &lt;/header&gt;
  
    &lt;div ng-view&gt;&lt;/div&gt;
  
    {{connected}}
    {{username}}
  
    &lt;footer&gt;
      &lt;nav class="navbar navbar-default"&gt;
        &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col xs-12 col-sm-12 col-md-12 col-lg-12"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                &lt;li&gt;&lt;a href="legal.html"&gt;Mentions légales&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="website_plan.html"&gt;Plan du site&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="mailto:webmaster@infotel.com"&gt;Contacter l'administrateur&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="col xs-4 col-sm-4 col-md-4 col-lg-4"&gt;
              &lt;p&gt;© Copyright Yahoo 2014&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/footer&gt;
  
    &lt;!-- In production use:
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"&gt;&lt;/script&gt;
    --&gt;
    &lt;script src="../bower_components/angular/angular.js"&gt;&lt;/script&gt;
    &lt;script src="../bower_components/angular-route/angular-route.js"&gt;&lt;/script&gt;
    &lt;script src="lib/angular/angular-animate.js"&gt;&lt;/script&gt;
    &lt;script src="lib/angular/angular-resource.js"&gt;&lt;/script&gt;
    &lt;script src="lib/bootstrap/bootstrap.js"&gt;&lt;/script&gt;
    &lt;script src="js/app.js"&gt;&lt;/script&gt;
    &lt;script src="js/services.js"&gt;&lt;/script&gt;
    &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
    &lt;script src="js/filters.js"&gt;&lt;/script&gt;
    &lt;script src="js/directives.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Index.html partial view</p>
  
  <pre><code>&lt;div id="content"&gt;
    &lt;div class="container-fluid"&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col xs-12 col-sm-12 col-md-12 col-lg-12"&gt;&lt;a id="bannerlink" href="http://www.yahoo.com"&gt;&lt;img id="bannerimage" src="img/slider-mobile1.jpg" alt="Banner image" class="img-responsive"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
  
        &lt;div class="articles" ng-repeat="article in articles"&gt;
            &lt;div class="col xs-4 col-sm-4 col-md-4 col-lg-4"&gt;
              &lt;h3&gt;{{article.title}}&lt;/h3&gt;
              &lt;p&gt;{{article.content}}&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Login html partial view:</p>
  
  <pre><code>&lt;div id="content" ng-controller="LoginCtrl"&gt;
    &lt;form name="login" action="#" ng-submit="login()"&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;p&gt;Nickname&lt;/p&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text" name="nickname" ng-model="nickname" required&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;p&gt;Password&lt;/p&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="password" name="password" ng-model="password" required&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      &lt;input type="submit" id="submit" value="Submit"&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>App.js:</p>
  
  <pre><code>'use strict';
  
  
  // Declare app level module which depends on filters, and services
  angular.module('myApp', [
    'ngRoute',
    'myApp.filters',
    'myApp.services',
    'myApp.directives',
    'myApp.controllers'
  ]).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/index', {templateUrl: 'partials/index.html', controller: 'IndexCtrl'});
    $routeProvider.when('/group', {templateUrl: 'partials/group.html', controller: 'GroupCtrl'});
    $routeProvider.when('/login', {templateUrl: 'partials/login.html', controller: 'LoginCtrl'});
    $routeProvider.otherwise({redirectTo: '/index'});
  }]);
  </code></pre>
  
  <p>Controllers:</p>
  
  <pre><code>'use strict';
  
  /* Controllers */
  
  angular.module('myApp.controllers', [])
    .controller('AppCtrl', ['$scope', 'Session', function(scope, Session) {
  
      scope.connected=Session.isConnected();
  
      scope.username="Harald";
  
      scope.login = Session.connect();
  
      scope.disconnect = Session.disconnect();
  
      scope.$watch('connected', function(){
          alert("Connected changed!");
      });
  
  
    }])
    .controller('IndexCtrl', [ '$scope', 'Article', function(scope, Article) {
  
      scope.articles = Article.query();
  
    }])
    .controller('GroupCtrl', [function() {
  
    }])
    .controller('LoginCtrl', [ '$scope', 'Session', function(scope, Session) {
  
      scope.connected=Session.isConnected();
  
      scope.login = Session.connect();
  
      scope.disconnect = Session.disconnect();
  
    }]);
  </code></pre>
  
  <p>Services:</p>
  
  <pre><code>'use strict';
  
  /* Services */
  
  
  // Demonstrate how to register services
  // In this case it is a simple value service.
  var myAppServices = angular.module('myApp.services', ['ngResource']).
    value('version', '0.1');
  
  myAppServices
  .factory('Article', ['$resource',
    function(resource){
      return resource('articles/:articleId.json', {}, {
        query: {method:'GET', params:{articleId:'articles'}, isArray:true}
      });
    }])
  .factory('Session', function() {
  
          var connected = false;
          var nickname = "unknown";
  
          return{
              isConnected : function() {
                  return connected;
              },
  
              getNickname : function() {
                  return nickname;
              },
  
              connect : function() {
                  connected = true;
                  window.alert("Connected service!");
              },
  
              disconnect : function() {
                  connected = false;
              }
          }
    });
  </code></pre>