title: How to save selected language in local storage or cookies in angular js
body: <p>I'm new in angularjs. I need to save the language selected from a select tab in html, in local storage or cookies, that when user navigates to another page, the new page opened load and use the language selected in previous page. 
  Like now, if change page or just refresh the current page, selected language disappear and user must select it agin.
  I used bower components for angular js, and load translation from static files.</p>
  
  <ol>
  <li>Here is my Html code:</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div &gt;
      &lt;section class="caret"&gt;
        &lt;h4&gt;Select language for translation:&lt;/h4&gt;
        &lt;select class="caret" ng-change="translate()" ng-model="selectedLanguage"&gt;
          &lt;option class="caret" value="en"&gt;English&lt;/option&gt;
          &lt;option class="caret" value="no"&gt;Norsk&lt;/option&gt;
        &lt;/select&gt;
      &lt;/section&gt;
  &lt;div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="2">
  <li>My app</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('myApp', ['ngResource']);</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="3">
  <li>My controller</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>app.controller('myController',['$scope', 'translationService', 
  
  function ($scope, translationService){  
  
    //Run translation if selected language changes
    $scope.translate = function(){
         translationService.getTranslation($scope, $scope.selectedLanguage);
     };
     
     //Init
     $scope.selectedLanguage = 'en';
     $scope.translate();
     
  }]);</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="4">
  <li>My translation service</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>app.service('translationService', function($resource) {  
  
          this.getTranslation = function($scope, language) {
              var languageFilePath = 'translation_' + language + '.json';
              console.log(languageFilePath);
              $resource(languageFilePath).get(function (data) {
                  $scope.translation = data;
              });
     
     
          };
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you.</p>