How to share information from one controller to another using a service?

Question

I have doubts about how to share my data between two controllers.
I currently have two "div" with two controllers.

• The PriceController driver calls a REST service. The service returns a price matrix that exists in a database and loads the data (objects) in a table.
• In the FormController, the form information is obtained and updated in the database.

Desired functionality:

• When you click on the "Edit" button, the information is loaded in the form.
• The form allows you to edit the "Price" field.
• By pressing the "Save" button of the form, it is updated in the database.

I made an example of what I want. The service to save the data in the database is done, so I did not put it in the example..

Questions:

1. Is it convenient to implement the use of ng-model? How?
   
2. Is it necessary to use ngModelOptions?
   
3. How can I send the data of my form to the database?
   
4. The connection between controllers is correct?
5. Can you give me an idea?

Example application

Example in JsFiddle
app.js

angular.module("app", [])
.factory("Service", function(){
    var data={}
  return data;
})
.controller("FormController", function($scope, Service){
    $scope.service = Service;
  $scope.updateData = function(data){
    //TODO: Implement logic to update database
  }

})
.controller("DataController", function($scope, Service){
  $scope.service = Service;
  // Fake database
  $scope.dataPrices = [
    {
        code: 'AA',
        price: 111
    },
    {
        code: 'BB',
        price: 222
    },
    {
        code: 'CC',
        price: 333
    }
  ];
    $scope.editData = function(index){
        $scope.service.data = $scope.dataPrices[index];
    }
});

index.html

<div ng-app="app">
<div ng-controller="FormController" >
<form name="mainForm"  novalidate>
    <div>
        <label>Code</label>
        <div>
            <input
                type="text"
                name="code"
                ng-required="true"
                ng-disabled="true"
                value="{{service.data.code}}"
            />
        </div>
    </div>

    <div>
        <label>Price</label>
        <div>
            <input
                    type="number"
                    name="price"
                    ng-required="true"
                    value="{{service.data.price}}"
            />
        </div>
    </div>
    <div>
        <button
          type="submit" 
          ng-click="updateData(data)">
          Save
      </button>
    </div>
</form>
</div>
<div ng-controller="DataController">
    <table>
        <tr>
            <th>Code</th>
            <th>Price</th>
            <th>Action</th>
        </tr>
        <tr ng-repeat="dat in dataPrices">
            <td>{{dat.code}}</td>
            <td>{{dat.price}}</td>

            <td>
                <button ng-click="editData($index)">
                    Edit
                </button>
            </td>
        </tr>
    </table>
</div>
</div>

Excuse me for my English.
Thank you.

Answer 1

A response to your questions:

Is it convenient to implement the use of ng-model? How? You can use ng-model like this:

<input ... ng-model="service.data.code" />

Is it necessary to use ngModelOptions? No its not necessary but it may be useful in some circumstances - https://docs.angularjs.org/api/ng/directive/ngModel

How can I send the data of my form to the database? You can post it off to the backend using fetch:

fetch(endpoint, Service.data).then(response => console.log(response))

The connection between controllers is correct? Yes, using a service is the best approach to sharing data between controllers.