Angularjs: Local storage contenteditable not saving

Local storage ceases to work when I try to extend it to include contentEditable. Local storage ceases to work when I try to extend it to include contentEditable. The following is the link to the CodePen: https://codepen.io/zanderbush/pen/WNwWbWe. Any help is appreciated.

Alone, this works.

var app = angular.module('TodoApp', ["LocalStorageModule"]);

app.controller('TodoController', function($scope, localStorageService) {
  
  if (!localStorageService.get("taskListActive")) {
    $scope.tasksActive = [
      {
        text: "Do me next",
        priority: 1,
        complete: false
      },
      {
        text: "I'm not important",
        priority: 0,
        complete: false
      }
    ];
    
  } else {
    $scope.tasksActive = localStorageService.get("taskListActive");
  }
  
  if (!localStorageService.get("taskListComplete")) {
    $scope.tasksComplete = [
      {
        text: "I'm already done",
        priority: 0,
        complete: true
      }
    ];
  } else {
    $scope.tasksComplete = localStorageService.get("taskListComplete");
  }
  
  $scope.totalTasks = function() {
    console.log($scope.tasksComplete.length)
    return $scope.tasksActive.length + $scope.tasksComplete.length;
  }
  
  $scope.totalRemaining = function() {
    return $scope.tasksActive.length;
  };
  
  $scope.totalComplete = function() {
    return $scope.tasksActive.length;
  };
  
  $scope.todoAdd = function() {
    if ($scope.taskInput.name) {
      $scope.tasksActive.unshift({ text:$scope.taskInput.name, priority:$scope.taskInput.priority || 0, complete:false});
      $scope.taskInput.name = '';
      $scope.taskInput.priority = 0;
    }
  };
  
  $scope.togglePriority = function(task) {
    if( task.priority === 0 ) {
      task.priority = 1;
      console.log('a')
    } else {
      task.priority = 0;
    }
  };
  
  $scope.completeTask = function(task) {
    //var task = $scope.tasksActive[index];
    task.complete = true;
    task.priority = 0;
    $scope.tasksActive.splice($scope.tasksActive.indexOf(task), 1);
    $scope.tasksComplete.unshift(task);
  };
  
  $scope.uncompleteTask = function(task) {
    task.complete = false;
    $scope.tasksComplete.splice($scope.tasksComplete.indexOf(task), 1);
    $scope.tasksActive.unshift(task);
  };
  
  $scope.deleteTask = function(task,list) {
    if( list == "active" ) {
      $scope.tasksActive.splice($scope.tasksActive.indexOf(task), 1);
    } else {
      $scope.tasksComplete.splice($scope.tasksComplete.indexOf(task), 1);
    }
    
  };
   
  $scope.clearCompleted = function () {
      var deleteArr= [];
      for (var i = 0; i < $scope.tasksComplete.length; i++) deleteArr.push(i);
      for (var i = 0; i < deleteArr.length; i++) {
        var task = i;
        $scope.tasksComplete.splice($scope.tasksComplete.indexOf(task) - 1, 1);
      }
  };

  $scope.$watch("tasksActive",function  (newVal,oldVal) {
        if (newVal !== null && angular.isDefined(newVal) && newVal!==oldVal) {
            localStorageService.add("taskListActive",angular.toJson(newVal));
        }
    },true);
  
  $scope.$watch("tasksComplete",function  (newVal,oldVal) {
        if (newVal !== null && angular.isDefined(newVal) && newVal!==oldVal) {
            localStorageService.add("taskListComplete",angular.toJson(newVal));
        }
    },true);
  
});

However, when I add the following code to accomodate for contentEditable, neither work.

var text = document.getElementById('myText');
var myData;
var postData = window.localStorage.getItem("save");
var reset = text.innerHTML;
// if no data
if (postData == null || postData == '') {
    myData = text.innerHTML;
    // store default value
    window.localStorage.setItem("save", myData);
    // make it placeholder style
    text.classList.remove('changed');
} else {
    // if there is a value post it
    text.innerHTML = postData;
    // make dark text
    text.classList.add('changed');
}

function saveChanges() {
    // store the current value
    myData = text.innerHTML;
    // local store the value
    window.localStorage.setItem("save", myData);
    text.classList.add('changed');
}

function clearStorage() {
    text.classList.remove('changed');
    // clear storage
    window.localStorage.clear("save");
    // return to default text
    text.innerHTML = reset;
}

Update: I just found this code to model mine after, but I can't seem to implement it. When I do, I am no longer able to add tasks.

var appx = angular.module('mainApp',[]);

appx.controller('app',function($scope) {
    $scope.tasks = [];
    var taskData = localStorage['tasksList'];
    if(taskData !== undefined){
        $scope.tasks = JSON.parse(taskData);
    }
    $scope.searchEnter = function(event) {
        //console.log(event.keyCode); 
        if(event.which==13 && $scope.task!=''){
            $scope.addTask();
        }
    };
    $scope.addTask=function(event){
        $scope.tasks.push({'taskmsg':$scope.task, 'status':false});
        //console.log($scope.task);
        $scope.task='';
        localStorage['tasksList']=JSON.stringify($scope.tasks);
    };
    $scope.editContent=function(event,mm){
        console.log(mm);
        for(i=0;i<$scope.tasks.length;i++){
            if($scope.tasks[i].taskmsg==mm){
                console.log(i);
                $scope.tasks[i].taskmsg=event.target.innerText;
            }
        }
        event.target.contentEditable = event.target.contentEditable == "false" ? "true" : "false";
        localStorage['tasksList']=JSON.stringify($scope.tasks);
        //event.target.contentEditable = event.target.contentEditable == "false" ? "true" : "false";
    };
    $scope.enter=function(event,msg){
        if(event.which==13 && msg!=''){
        //console.log('asd');
        $scope.editContent(msg);
        }
        ///console.log('wq');
    }
    $scope.delfield=function(mm){
        console.log("2");
        for(i=0;i<$scope.tasks.length;i++){
            if($scope.tasks[i].taskmsg==mm){
                console.log(mm);
                console.log(localStorage['tasksList']);
                $scope.tasks.splice(i,1);
                localStorage['tasksList']=JSON.stringify($scope.tasks);
            }
        }
    }
    $scope.sort=function(){
        console.log("sort");
        
    }
});

from Angularjs: Local storage contenteditable not saving