MEAN app, many-to-many, how to implement with checkboxes?

I have Tasks and Users in my MEAN app. One User can accomplish many Tasks and one Task can be accomplished by many Users. I am stuck at the frontend part, I'm not sure how to implement adding and removing Tasks from Users (or the other way around).

My models look like this (simplified for brevity):

task.model.js

const mongoose = require("mongoose");
const User = require("../models/user.model");
const TaskSchema = mongoose.Schema({
  name: String,
  usersCompleted: [{ type: mongoose.Schema.ObjectId, ref: "User" }]
});
module.exports = mongoose.model("Task", TaskSchema);

user.model.js

const mongoose = require("mongoose");
const Task = require("../models/task.model");
const UserSchema = mongoose.Schema({
  username: String,
  tasks: [{ type: mongoose.Schema.ObjectId, ref: "Task" }]
});
module.exports = mongoose.model("User", UserSchema);

Controllers:

task.controller.js (only create and update methods are displayed)

...
exports.create = (req, res) => {
  // Validate request
  if (!(req.body.name)) {
    return res.status(400).send({
      message: "Task content can not be empty"
    });
  }

  // Create a Task
  const task = new Task({
    name: req.body.name,
    usersCompleted: usersCompleted
  });

  // Save Task in the database
  task
    .save()
    .then(data => {
      res.send(data);
    })
    .catch(err => {
      res.status(500).send({
        message: err.message || "Some error occurred while creating the Task."
      });
    });
};
...
exports.update = (req, res) => {
  // Validate Request
  if (!(req.body.name)) {
    return res.status(400).send({
      message: "Task content can not be empty"
    });
  }

  // Find task and update it with the request body
  Task.findByIdAndUpdate(
    req.params.taskId,
    {
      name: req.body.name,
      usersCompleted: usersCompleted
    },
    { new: true }
  )
    .then(task => {
      if (!task) {
        return res.status(404).send({
          message: "Task not found with id " + req.params.taskId
        });
      }
      res.send(task);
    })
    .catch(err => {
      if (err.kind === "ObjectId") {
        return res.status(404).send({
          message: "Task not found with id " + req.params.taskId
        });
      }
      return res.status(500).send({
        message: "Error updating task with id " + req.params.taskId
      });
    });
};
...

(user.controller is implemented in the same way)

On the frontend part, I have something like this:

user-details.controller.js

function UserDetailsController($routeParams, userService) {
  let vm = this;
  if (!$routeParams) {
    return;
  }
  userService.getUserByUsername($routeParams.username).then(data => (vm.user = data));
  taskService.getAllTasks().then(data => (vm.tasks = data));
  vm.updateUser = function() {
    userService.updateUser(vm.user);
  };
}
module.exports = UserDetailsController;

user-details.html

<div class="user-details">
    <h4>Edit the user:</h4>
    <form>
        Username: <input type="text" ng-model="vm.user.username" />
        <!-- ******************************************* -->
        <!-- CHECKBOXES WITH  SHOULD BE HERE -->
        <!-- ******************************************* -->
    </form>
</div>
<button ng-click="vm.updateUser()">Save</button>

At the current point, I'm not sure how to set initial checkboxes values (depending on which users are assigned to which tasks), and how to save the new state if changes are made.