title: How to add local storage in angular?
body: <p>I made a table using angular, everything works great for now. Now I would like to add local storage feature.
  I really tried to achieve this but I came to a point I don't now what to do. I tried using <strong>gsklee/ngStorage</strong>
  and <strong>gregory/angular-local-storage</strong> library but I am having problem implementing it to my current code.</p>
  
  <p>Can someone take a look?
  Thank you for your time.</p>
  
  <p>script.js</p>
  
  
  
  <pre><code>(function() {
  "use strict";
  
   var table = angular.module('myTable', ['angularUtils.directives.dirPagination','ngStorage']); 
  
  table.filter('startFrom', function() {
      return function(input, start) {
          if(input) {
              start = +start;
          return input.slice(start);
          }
          return [];
      }
  });
  
      table.controller('TodoCtrl', function($scope, $http, $localStorage) {
      $http.get('todos.json').then(function(res) {
          $scope.todos = res.data;
      });
  
      $scope.currentPage = 1; 
      $scope.entryLimit = 5;
  
      $scope.sort = function (keyname) {
          $scope.sortKey = keyname;
          $scope.reverse = !$scope.reverse;
      };  
  
      $scope.DeveloperDelete = function (id){
          var result = confirm('Are you sure?');
          if (result === true) {  
              var index = getSelectedIndex(id);
              $scope.todos.splice(index, 1);
          };
      };
  
      function getSelectedIndex(id){
          for(var i = 0; i &lt; $scope.todos.length; i++)
              if($scope.todos[i].id == id)
                  return i;
              return -1;  
      };
  
      $scope.addDeveloperRow = function(){        
          $scope.todos.push({ 'id':$scope.id, 'text': $scope.text, 'color':$scope.color, "progress:":$scope.progress});
          $scope.id='';
          $scope.text='';
          $scope.color='';
          $scope.progress='';
      };  
  
  }); 
  
  
  })();
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="myTable" &gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/main.css"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;script src="dirPagination.js"&gt;&lt;/script&gt;
  &lt;script src="ngStorage.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body ng-controller="TodoCtrl"&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="col-lg-12"&gt;
        &lt;div&gt;
          &lt;h1 class="centered"&gt;My todo list&lt;/h1&gt;
        &lt;/div&gt;
  
        &lt;div class="col-lg-3"&gt;
          &lt;h4&gt;Search&lt;/h4&gt;
          &lt;form&gt;
            &lt;div class="form-group"&gt;
              &lt;div class="input-group"&gt;
                &lt;div class="input-group-addon"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/div&gt;
                &lt;input type="text" class="form-control" ng-model="test"&gt;
              &lt;/div&gt;      
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
  
        &lt;div class="col-lg-3"&gt;   
        &lt;h4&gt;Show number of records&lt;/h4&gt;
          &lt;form&gt;
            &lt;div class="form-group"&gt;
              &lt;div class="input-group"&gt;
                &lt;div class="input-group-addon"&gt;&lt;i class="fa fa-search" &gt;&lt;/i&gt;&lt;/div&gt;
                  &lt;select ng-model="entryLimit" class="form-control"&gt;
                  &lt;option&gt;5&lt;/option&gt;
                  &lt;option&gt;10&lt;/option&gt;
                  &lt;option&gt;20&lt;/option&gt;
                  &lt;option&gt;50&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;      
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
  
        &lt;div class="col-lg-3"&gt;   
          &lt;h4&gt;Show custom table&lt;/h4&gt;
            &lt;form&gt;
              &lt;div class="form-group"&gt;
                &lt;div class="input-group"&gt;    
                  &lt;div class="input-group-addon"&gt;&lt;i class="fa fa-search" &gt;&lt;/i&gt;&lt;/div&gt;
                    &lt;select class="form-control "&gt;
                      &lt;option class="btn-sm ng-scope" ng-click="removeId = !removeId" &gt; Hide Id field&lt;/option&gt;
                      &lt;option class="btn-sm ng-scope" ng-click="removeText = !removeText" &gt;Hide Text field&lt;/option&gt;
                      &lt;option class="btn-sm ng-scope" ng-click="removeColor = !removeColor" &gt;Hide Color field&lt;/option&gt;
                      &lt;option class="btn-sm ng-scope" ng-click="removeProgress = !removeProgress" &gt;Hide Progress field&lt;/option&gt;             
                    &lt;/select&gt;
                &lt;/div&gt;      
              &lt;/div&gt;
            &lt;/form&gt;
        &lt;/div&gt;
  
        &lt;div class="col-lg-3"&gt;
        &lt;br&gt;&lt;br&gt;
          &lt;form&gt;
            &lt;div class="form-group"&gt;
              &lt;div class="input-group"&gt;
                &lt;button type="button" class="btn btn-default btn-block " ng-click="addDeveloperRow()"&gt;Add a new record&lt;/button&gt;
              &lt;/div&gt;      
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
  
  
        &lt;br&gt; 
        &lt;table class="table table-striped" st-table="data"&gt;
            &lt;thead&gt;
              &lt;th ng-click="sort('id')" ng-hide="removeId" st-sort="id"&gt;Id
                &lt;span class="glyphicon sort-icon" ng-show="sortKey=='id'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"&gt;&lt;/span&gt;
              &lt;/th&gt;
              &lt;th ng-click="sort('text')" ng-hide="removeText" st-sort="text"&gt;Text
                &lt;span class="glyphicon sort-icon" ng-show="sortKey=='text'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"&gt;&lt;/span&gt;
              &lt;/th&gt;
              &lt;th ng-click="sort('color')" ng-hide="removeColor" st-sort="color"&gt; Color
                &lt;span class="glyphicon sort-icon" ng-show="sortKey=='color'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"&gt;&lt;/span&gt;
              &lt;/th&gt;
              &lt;th ng-click="sort('progress')" ng-hide="removeProgress" st-sort="progress"&gt;Progress
                &lt;span class="glyphicon sort-icon" ng-show="sortKey=='color'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"&gt;&lt;/span&gt;
              &lt;/th&gt;
              &lt;th&gt;CRUD&lt;/th&gt;
            &lt;/thead&gt;  
            &lt;tbody&gt;
              &lt;tr dir-paginate="todo in todos |orderBy:sortKey:reverse|filter:test| startFrom:(currentPage-1)*entryLimit | itemsPerPage:entryLimit "&gt;
                &lt;td ng-hide="removeId"&gt;
                  &lt;div ng-hide="todo.editing"&gt;{{ todo.id }} &lt;/div&gt;
  
                  &lt;div ng-show="todo.editing"&gt;&lt;input type="id" ng-model="todo.id" /&gt;&lt;/div&gt;
                &lt;/td&gt;
  
                &lt;td ng-hide="removeText"&gt;                
                  &lt;div ng-hide="todo.editing"&gt;{{ todo.text }}&lt;/div&gt;
                  &lt;div ng-show="todo.editing"&gt;&lt;input type="text" ng-model="todo.text" /&gt;&lt;/div&gt;
                &lt;/td&gt;
                &lt;td ng-hide="removeColor" style="color:{{todo.color}}" &gt;
                  &lt;div ng-hide="todo.editing"&gt;{{todo.color}}&lt;/div&gt;
                  &lt;div ng-show="todo.editing"&gt;&lt;input type="text" ng-model="todo.color" /&gt;&lt;/div&gt;
                &lt;/td&gt;
                &lt;td ng-hide="removeProgress"&gt;
                  &lt;div ng-hide="todo.editing"&gt;{{todo.progress}}% &lt;/div&gt;
                  &lt;div ng-show="todo.editing"&gt;&lt;input type="text" ng-model="todo.progress" /&gt;&lt;/div&gt;
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;button class="btn btn-danger btn-sm ng-scope"  ng-click="DeveloperDelete(todo.id)"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;&lt;/button&gt;
                  &lt;button class="btn btn-warning btn-sm ng-scope" ng-click="todo.editing = !todo.editing"&gt;&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;&lt;/button&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;
  
       &lt;div class="centeredPag"&gt;
        &lt;dir-pagination-controls
          max-size="5"
          direction-links="true"
          boundary-links="true" &gt;
        &lt;/dir-pagination-controls&gt;
      &lt;/div&gt; 
  
  
  
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>