title: Angular 1: Last checkbox doesn't stay checked after page refresh
body: <p>I am saving all data into localStorage. When a checkbox is checked function is called to change items state. It works fine. However after page refresh, last checked item gets unchecked (or if it was unchecked, it gets checked) while others are working just fine. Why does that 1 last action gets ignored after page is refreshed?</p>
  
  <p>Here is codepen: <a href="http://codepen.io/kunokdev/pen/vGeEoY?editors=1010" rel="nofollow">http://codepen.io/kunokdev/pen/vGeEoY?editors=1010</a> </p>
  
  <p>(add few items and click on "click me" for all of them and then refresh page, last action will be ignored)</p>
  
  <p>The view:</p>
  
  <pre><code>&lt;div ng-app="TaskApp" ng-controller="ToDoCtrl"&gt;
    &lt;form&gt;
      &lt;input type="text" ng-model="toDoItem"&gt;
      &lt;input type="submit" ng-click="addToDoItem()"&gt;
    &lt;/form&gt;
    &lt;div&gt;
      &lt;ul&gt;
        &lt;div
          ng-repeat="item in toDoItems |
                     orderBy: 'createdAt'
                     track by item.createdAt"&gt;
          &lt;b&gt;Content:&lt;/b&gt; {{item.content}} &lt;br&gt;
          &lt;b&gt;Completed?&lt;/b&gt; {{item.completed}}
          &lt;md-checkbox ng-model="item.completed" ng-click="toggleToDoItem(item.completed)" aria-label="todo-checkbox"&gt;
            CLICK ME
          &lt;/md-checkbox&gt;
        &lt;/div&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And JS:</p>
  
  <pre><code>var ls = {};
  
  ls.get = function(key) {
      return JSON.parse(localStorage.getItem(key));
  };
  
  // sets or updates a value for a key
  ls.set = function(key, val) {
      localStorage.setItem(key, JSON.stringify(val));
  };
  
  // returns true if value is set, else false
  ls.isSet = function(key) {
      var val = ls.get(key);
      return ( null === val || 'undefined' === typeof val) ? false : true;
  };
  
  // removes a set item
  ls.remove = function(key) {
      localStorage.removeItem(key)
  };
  
  
  var TaskApp = angular.module('TaskApp', [
    'ngMaterial',
    'taskAppControllers'
  ]);
  
  var taskAppControllers = angular.module('taskAppControllers',[]);
  
  taskAppControllers.controller('ToDoCtrl', ['$scope',
    function($scope){
      //
      loadToDoItems = function(){
        var data = ls.get("toDoData");
        if (data == null) data = [];
        return data;
      };
      //
      $scope.toDoItems = loadToDoItems();
      //
      $scope.addToDoItem = function(){
        var toDoItems = $scope.toDoItems;
        var newToDoItem = {
          "content" : $scope.toDoItem,
          "createdAt" : Date.now(),
          "completed" : false
        }
        toDoItems.push(newToDoItem);
        ls.set("toDoData", toDoItems);
        $scope.toDoItem = "";
      };
      //
      $scope.toggleToDoItem = function(item){
        console.log('test');
        var toDoItems = $scope.toDoItems;
        for (var i = 0; i &lt; toDoItems.length; i++)
          if (toDoItems[i].createdAt === item){
            if (toDoItems[i].completed == true)
              toDoItems[i].completed = false;
            else
              toDoItems[i].completed = true;
          }
        ls.set('toDoData', toDoItems);
      };
      //
  }]);
  </code></pre>