Save and Fetch Data

// Notice that chrome.storage.sync.get is asynchronous
chrome.storage.sync.get('todolist', function(value) {
  // The $apply is only necessary to execute the function inside Angular scope
  $scope.$apply(function() {
    $scope.load(value);
  });
});

// If there is saved data in storage, use it. Otherwise, bootstrap with sample todos
$scope.load = function(value) {
  if (value && value.todolist) {
    $scope.todos = value.todolist;
  } else {
    $scope.todos = [
      {text:'learn angular', done:true},
      {text:'build an angular app', done:false}];
  }
}

$scope.save = function() {
  chrome.storage.sync.set({'todolist': $scope.todos});
};
    

  /**
   * Listen to changes in the model and trigger the appropriate changes in the view
   **/
  model.addListener(function(model, changeType, param) {
    if ( changeType === 'removed' || changeType === 'archived' || changeType === 'reset') {
      redrawUI(model);
    } else if ( changeType === 'added' ) {
      drawTodo(model.todos[param], list);
    } else if ( changeType === 'stateChanged') {
      updateTodo(model.todos[param]);
    }
    storageSave();
    updateCounters(model);
  });

// If there is saved data in storage, use it. Otherwise, bootstrap with sample todos
  var storageLoad = function() {
    chrome.storage.sync.get('todolist', function(value) {
      if (value && value.todolist) {
        model.setTodos(value.todolist);
      } else {
        model.addTodo('learn Chrome Apps', true);
        model.addTodo('build a Chrome App', false);
      }
    });
  }

  var storageSave = function() {
    chrome.storage.sync.set({'todolist': model.todos});
  };
    

...
       [ <a href="" ng-click="archive() || save()">archive</a> ]
...
            <input type="checkbox" ng-model="todo.done" ng-change="save()">
...
       <form ng-submit="addTodo() || save()">
...
    

<form>
  <input type="text" size="30"
         placeholder="add new todo here">
  <input class="btn-primary" type="submit" value="add">
</form>
    

var defaultDropText = "Or drop files here...";
$scope.dropText = defaultDropText;

// on dragOver, we will change the style and text accordingly, depending on
// the data being transferred
var dragOver = function(e) {
  e.stopPropagation();
  e.preventDefault();
  var valid = e.dataTransfer && e.dataTransfer.types
    && ( e.dataTransfer.types.indexOf('Files') >= 0
      || e.dataTransfer.types.indexOf('text/uri-list') >=0 )
  $scope.$apply(function() {
    $scope.dropText = valid ? "Drop files and remote images and they will become Todos"
        : "Can only drop files and remote images here";
    $scope.dropClass = valid ? "dragging" : "invalid-dragging";
  });
}

// reset style and text to the default
var dragLeave = function(e) {
  $scope.$apply(function() {
    $scope.dropText = defaultDropText;
    $scope.dropClass = '';
  });
}

// on drop, we create the appropriate TODOs using dropped data
var drop = function(e) {
  e.preventDefault();
  e.stopPropagation();

var newTodos=[];
  if (e.dataTransfer.types.indexOf('Files') >= 0) {
    var files = e.dataTransfer.files;
    for (var i = 0; i < files.length; i++) {
      var text = files[i].name+', '+files[i].size+' bytes';
      newTodos.push({text:text, done:false, file: files[i]});
    }
  } else { // uris
    var uri=e.dataTransfer.getData("text/uri-list");
    newTodos.push({text:uri, done:false, uri: uri});
  }

$scope.$apply(function() {
    $scope.dropText = defaultDropText;
    $scope.dropClass = '';
    for (var i = 0; i < newTodos.length; i++) {
      $scope.todos.push(newTodos[i]);
    }
    $scope.save();
  });
}

document.body.addEventListener("dragover", dragOver, false);
document.body.addEventListener("dragleave", dragLeave, false);
document.body.addEventListener("drop", drop, false);
    

var defaultDropText = "Or drop files here...";

var dropText = document.getElementById('dropText');
dropText.innerText = defaultDropText;

// on dragOver, we will change the style and text accordingly, depending on
// the data being transfered
var dragOver = function(e) {
  e.stopPropagation();
  e.preventDefault();
  var valid = isValid(e.dataTransfer);
  if (valid) {
    dropText.innerText="Drop files and remote images and they will become Todos";
    document.body.classList.add("dragging");
  } else {
    dropText.innerText="Can only drop files and remote images here";
    document.body.classList.add("invalid-dragging");
  }
}

var isValid = function(dataTransfer) {
  return dataTransfer && dataTransfer.types
    && ( dataTransfer.types.indexOf('Files') >= 0
      || dataTransfer.types.indexOf('text/uri-list') >=0 )
}

// reset style and text to the default
var dragLeave = function(e) {
  dropText.innerText=defaultDropText;
  document.body.classList.remove('dragging');
  document.body.classList.remove('invalid-dragging');
}

// on drop, we create the appropriate TODOs using dropped data
var drop = function(e, model) {
  e.preventDefault();
  e.stopPropagation();
  if (isValid(e.dataTransfer)) {
    if (e.dataTransfer.types.indexOf('Files') >= 0) {
      var files = e.dataTransfer.files;
      for (var i = 0; i < files.length; i++) {
        var text = files[i].name+', '+files[i].size+' bytes';
        model.addTodo(text, false, {file: files[i]});
      }
    } else { // uris
      var uri=e.dataTransfer.getData("text/uri-list");
      model.addTodo(uri, false, {uri: uri});
    }
  }

  dragLeave();
}

exports.setDragHandlers = function(model) {
  document.body.addEventListener("dragover", dragOver, false);
  document.body.addEventListener("dragleave", dragLeave, false);
  document.body.addEventListener("drop", function(e) {
      drop(e, model);
    }, false);
}
    

<body ng-controller="TodoCtrl" ng-class="dropClass">
<!-- remember to remove the ng-controller attribute from the div where it was before -->
    

<div>
 {{dropText}}
</div>
    

<div id="dropText">
</div>