title: Cookies in AngularJS
body: <p>I am making a SPA. On successful login I set the <code>cookies(username,userid,etc.)</code> that contain user information getting from the api.</p>
  <p><strong>Set a cookie using PHP :</strong></p>
  <pre><code>setcookie(&quot;NAME&quot;,$records['userinfo']['name'],time()+(20 * 365 * 24 * 60 * 60));
  </code></pre>
  <p><strong>Get it using JavaScript :</strong></p>
  <pre><code>function getCookie(cname) {
      var name = cname + &quot;=&quot;;
      var ca = document.cookie.split(';');
      for(var i=0; i&lt;ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0)==' ') c = c.substring(1);
          if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
      }
      return &quot;&quot;;
  }
  </code></pre>
  <p><strong>Try to show in Controller :</strong></p>
  <pre><code>angular.module('App', [])
  
    .controller('UserProfileCtrl', function($scope) {
       function getCookie(cname) {
      var name = cname + &quot;=&quot;;
      var ca = document.cookie.split(';');
      for(var i=0; i&lt;ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0)==' ') c = c.substring(1);
          if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
      }
      return &quot;&quot;;
  }
   $scope.username = getCookie('NAME');
    })
  </code></pre>
  <p><strong>index.html :</strong></p>
  <pre><code>&lt;html data-ng-app=&quot;App&quot; data-ng-controller=&quot;AppCtrl&quot;&gt;
    &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/app.css&quot; /&gt;
      &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;js/app.js&quot;&gt;&lt;/script&gt; 
    &lt;/head&gt;
    &lt;body data-ng-class=&quot;{'skip-animations':disabled}&quot; class=&quot;ng-cloak&quot;&gt;
          &lt;div class=&quot;list-group&quot; data-ng-controller=&quot;UserProfileCtrl&quot;&gt;
         &lt;p&gt;Welcome&lt;/p&gt;
          &lt;div class=&quot;username&quot;&gt;{{username}}&lt;/div&gt;
          &lt;div class=&quot;col-lg-12 col-md-12 col-sm-12 col-xs-12 user&quot;&gt;
          &lt;div class=&quot;user-bg-image&quot;&gt;
          &lt;img src=&quot;images/user-bg.png&quot;&gt;
          &lt;div class=&quot;user-img&quot;&gt;&lt;img src=&quot;{{userimage}}&quot;&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;ul class=&quot;user-profile clearfix&quot;&gt;
          &lt;a href=&quot;#123&quot;&gt;&lt;li&gt;Edit Profile&lt;/li&gt;&lt;/a&gt;
          &lt;a href=&quot;#123&quot; onclick=&quot;logout()&quot;&gt;&lt;li&gt;Logout&lt;/li&gt;&lt;/a&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>It works fine with reloading the app.On reloading we are able to retrieve cookie data (<code>username</code>).</p>
  <p><strong>Problem :</strong></p>
  <p>How can we retrieve these cookies without reloading the app?</p>