AngularJS Services - Pass object between views/controllers

I'm struggling to understand the concept of AngularJS services, I'm relatively new to AngularJS.

I'm essentially trying to pass a nested object between two controllers/views.

So I have this section in my home page partial that will have the project and task.

homePage.html

<div class="col-8" ng-repeat = "item in toDoList">
    <h4>{{item.project}}</h4>
    <p>{{item.task}}.</p>
</div>

Then I have this section from the new item partial, which is where the new to do task is added.

newitem.html

<form class="form" ng-submit="addNewToDoTask()">
    <div class="row projectInput text-center">
        <div class="col-12">
            <input type="text" ng-model="projectInput"
                   placeholder="Enter a project title">
        </div>
    </div>
    <div class="row taskInput text-center">
        <div class="col-12">
            <input type="text" ng-model="taskInput"
                   placeholder="Enter your task details">
        </div>
    </div>

    <button type="submit" class="btn-lg btn-success addItemButton">Add</button>
    <a href="#/"><button class="btn-lg btn-danger cancelButton">Cancel</button></a>
</form>

This is my app.module.js

var app = angular.module('ToDoListApp', ['ngRoute']);

app.config(function ($routeProvider, $locationProvider) {

    $locationProvider.hashPrefix('');

    $routeProvider
        .when("/", {
            templateUrl: "app/home/homePage.html",
        })
        .when("/newItem", {
            templateUrl: "app/newItem/newitem.html",
        })
        .otherwise({
            redirectTo: '/'
        });
});

controller for home page

app.controller('homePageCtrl', function ($scope) {

});

controller for new item page

app.controller('newItemCtrl', function ($scope) {

    $scope.toDoList = [{
        project: null,
        task: null,
        done: false
    }];

    $scope.addNewToDoTask = function () {
        $scope.toDoList.push({
            project: $scope.projectInput,
            task: $scope.taskInput,
            done: false
        });
        $scope.projectInput = "";
        $scope.taskInput = "";
    };
});

service to persist data across views

app.service('newToDoTaskService', function () {

});

So essentially when the form is submitted on the new item page, it will push a new object into the toDoList array, with the corresponding input values.

What I then want to do, is use the project and task values from that object, to populate the H4 and p tags on the home page.

I know a good way of achieving this is to use a service, I'm just struggling to understand the concept even after reading the documentation.

If someone could explain how I achieve this and breakdown the process, I would really appreciate it.

It's also worth mentioning clicking the add or cancel buttons on the new item page, will navigate you back to the home page.

Thanks

example service to persist data across views

app.service('taskService', function () {
    var taskArr = [];
    this.getTasks = function() {
        return taskArr;
    };
    this.addTask = function(task) {
        taskArr.push(task)
    };
});

To use, inject into the controller:

controller for new item page

app.controller('newItemCtrl', function ($scope, taskService) {

    $scope.addNewToDoTask = function () {
        taskService.addTask({
            project: $scope.projectInput,
            task: $scope.taskInput,
            done: false
        });
        $scope.projectInput = "";
        $scope.taskInput = "";
    };
});

controller for home page

app.controller('homePageCtrl', function ($scope, taskService) {

    $scope.toDoList = taskService.getTasks();

});

For more information, see

• AngularJS Developer Guide - Creating Services