title: Ng-repeat over localStorage data
body: <p>This is my partial view</p>
  
  <pre><code>&lt;table class="table table-hover" ng-controller="emailViewController"&gt;
      &lt;tbody&gt;
      &lt;tr &gt;
          &lt;td&gt;&lt;input type="checkbox" ng-checked="checkAllEmail" ng-model="selectedEmail"/&gt;
              &lt;a href="#"&gt;
                  &lt;span class="glyphicon glyphicon-star-empty"&gt;&lt;/span&gt;
              &lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;label ng-bind="add"&gt;&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;label ng-bind="subject"&gt;&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;label ng-bind="emailContent" &gt;&lt;/label&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I have this data stored in localStorage:</p>
  
  <p><a href="https://i.stack.imgur.com/kYqYD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kYqYD.png" alt="enter image description here"></a></p>
  
  <p>I want to ng-repeat over the values of the keys <code>ngStorage-add</code> and <code>ngStorage-subject</code>. I tried the following:</p>
  
  <p>1) <code>&lt;td&gt;&lt;label ng-bind="add" ng-repeat="item in localStorage.getItem('ngStorage-add')"&gt;&lt;/label&gt;&lt;/td&gt;</code>.</p>
  
  <p>2) <code>ng-repeat="item in localStorage.getItem('ngStorage-add') track by value"</code></p>
  
  <p>It did not work however. Does anyone have ideas on how to achieve this?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p><code>emailViewController</code>:</p>
  
  <pre><code>(function() {
      'use strict';
      var emailViewController = function (fetchDataService, $scope,$filter,$timeout, $localStorage) {
  
          $scope.to = [];
  
          var url = 'app/mock/emails.json';
          fetchDataService.getContent(url)
              .then(function(response){
                  $scope.emails = response.data;
                  $scope.loadEmails('Primary');
  
                  angular.forEach($scope.emails, function(key) {
                     $scope.to.push(key.to);
                  });
              });
  
            $scope.information = {
                add: [],
                subject: [],
                emailContent: []
              };
  
            $scope.typeaheadOpts = {
                minLength: 1
              };
  
             $scope.$on("decipher.tags.added", function(info, obj) {
                $timeout(function(){
                  tagAdded(info, obj);
                });
              });
  
              function tagAdded(info, obj) {
                for (var i = 0; i &lt; $scope.to.length; i++) {
                  if ($scope.to[i] === obj.tag.name) {
                    $scope.to.splice(i, 1);
                  } 
                }
              }
  
               $scope.close = function(){
                  //console.log("hide");
                  $('.modal').modal('hide');
  
              };
  
           $scope.loadEmails = function(searchCriteria){
               $scope.filteredEmails =  $filter('filterByCategory')
                                              ($scope.emails,searchCriteria);
           };
  
           $scope.submit = function (add, subject, emailContent) {
  
            if (! ($localStorage.add instanceof Array) ) {
                  $localStorage.add = [];
              }
  
              $localStorage.add.push(add);
  
              if (! ($localStorage.subject instanceof Array) ) {
                  $localStorage.subject = [];
              }
  
              $localStorage.subject.push(subject);
  
              if (! ($localStorage.emailContent instanceof Array) ) {
                  $localStorage.emailContent = [];
              }
  
              $localStorage.emailContent.push(emailContent);
              //$scope.update();
           };
  
  
              $scope.clear = function() {
                   $scope.information.add = [];
                   $scope.information.subject = '';
                   $scope.information.emailContent = '';
                   }            
  
          $scope.$on('loadEmail',function(event,data){
            $scope.loadEmails(data);
          });
      };
      angular.module('iisEmail')
          .controller ('emailViewController',
          ['fetchDataService', '$scope','$filter', '$timeout', '$localStorage', emailViewController]);
  }());
  </code></pre>
  
  <p><strong>ATTEMPT 1</strong></p>
  
  <p>This is returning the array - <code>$localStorage.add</code></p>
  
  <p>This is returning the first element of the array (<code>a</code> in this case) - <code>$localStorage.add[0][0]</code></p>
  
  <p><strong>ATTEMPT 2</strong></p>
  
  <p>I injected <code>$localStorage</code> in the directive that was loading the template. It still does not work. </p>
  
  <pre><code>(function() {
      'use strict';
  
      var drafts = function ($localStorage) {
          return {
              templateUrl : "app/partials/draftsView.html"
          };
      };
  
      angular.module('iisEmail').directive("drafts", ['$localStorage', drafts]);
  }());
  </code></pre>
  
  <p><strong>ATTEMPT 3</strong></p>
  
  <p>I stored the <code>$localStorage</code> data in a controller variable and got ng-repeat to iterate over the variable.</p>
  
  <pre><code>&lt;td&gt;&lt;label ng-repeat="item in addition track by $index"&gt;
                  {{item}}
          &lt;/label&gt;&lt;/td&gt;
  </code></pre>
  
  <p>Doing so produces a result, but the entire array is appearing in one line. I want <code>a</code> to be displayed in one line, and <code>b</code> to be displayed in the next line.</p>
  
  <p><strong>ATTEMPT 3 UPDATE</strong></p>
  
  <p>This is the updated partial view</p>
  
  <pre><code>&lt;table class="table table-hover" ng-controller="emailViewController"&gt;
      &lt;tbody&gt;
      &lt;tr &gt;
          &lt;td&gt;&lt;input type="checkbox" ng-checked="checkAllEmail" ng-model="selectedEmail"/&gt;
              &lt;a href="#"&gt;
                  &lt;span class="glyphicon glyphicon-star-empty"&gt;&lt;/span&gt;
              &lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;label ng-repeat="item in addition track by $index"&gt;
                  {{item}} 
          &lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;label ng-bind="subject"&gt;&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;label ng-bind="emailContent" &gt;&lt;/label&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>ATTEMPT 4</strong></p>
  
  <p>I modified the partial view as follows, and achieved exactly what I was looking for. Now, values of the keys are displayed in new lines. However, they are being displayed like so:</p>
  
  <pre><code>`[a]
   [b]
   [c]`
  </code></pre>
  
  <p>I dont want the array symbol to be shown. Here is the modified partial view.</p>
  
  <pre><code>&lt;table class="table table-hover" ng-controller="emailViewController"&gt;
      &lt;tbody&gt;
      &lt;tr ng-repeat = "(key, value) in addition" &gt;
          &lt;td&gt;&lt;input type="checkbox" ng-checked="checkAllEmail" ng-model="selectedEmail"/&gt;
              &lt;a href="#"&gt;
                  &lt;span class="glyphicon glyphicon-star-empty"&gt;&lt;/span&gt;
              &lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;  {{ value }} &lt;/td&gt;
          &lt;td&gt;&lt;label ng-bind="subject"&gt;&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;label ng-bind="emailContent" &gt;&lt;/label&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>SOLUTION</strong></p>
  
  <pre><code>&lt;table class="table table-hover" ng-controller="emailViewController"&gt;
      &lt;tbody&gt;
      &lt;tr ng-repeat = "(key, value) in localStorage.add" &gt;
          &lt;td&gt;&lt;input type="checkbox" ng-checked="checkAllEmail" ng-model="selectedEmail"/&gt;
              &lt;a href="#"&gt;
                  &lt;span class="glyphicon glyphicon-star-empty"&gt;&lt;/span&gt;
              &lt;/a&gt;&lt;/td&gt;
          &lt;td ng-repeat = "value in value"&gt;  {{value }} &lt;/td&gt;
          &lt;td&gt;&lt;label ng-bind="subject"&gt;&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;&lt;label ng-bind="emailContent" &gt;&lt;/label&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>