Angular and Laravel - сохранить идентификатор внешнего ключа и отобразить его значение

Question

У меня есть система управления результатами, использующая Laravel Endpoint и Angular7 Frontend.Я хочу отображать имя_экзамена, а не идентификатор в представлении результатов.Также в представлении результатов создания я хочу отобразить раскрывающийся список для имя_экспертизы и сохранить его идентификатор (значение, а не ключ) из таблицы экзаменов.

Я разработал эти две таблицы:

Экзамен:id, exam_name, user_id Результат: id, exam_id, user_id, оценка.

Модель экзамена

    protected $fillable = [
        'exam_name' ,
        'user_id'
    ];    


    protected $guarded = [
        'id'
    ];  

    public function user() {
        return $this->belongsTo('App\User');
    }

    public function results()
    {
      return $this->hasMany(App\Result);
    } 

Модель результата

    protected $fillable = [
        'score', 
        'exam_id',
        'user_id'
        ];

    protected $guarded = [
        'id'
    ]; 

    public function exam() {
        return $this->belongsTo('App\Exam');
    }  

    public function user() {
        return $this->belongsTo('App\User');
    }  

Результат: конечная точка Laravel

    public function index()
    {
        $results = Result::all();
        return response()->json($results);
    }

    public function store(Request $request)
    {
        $request->validate([
            'score' => 'required',
            'exam_id' => 'required',
        ]);

        $result = Result::create($request->all());

        return response()->json([
            'message' => 'Great success! New Score created',
            'result' => $result
        ]);
    }

    public function show(Result $result)
    {
        return $result;
    }

Угловой: result.service.ts

const apiUrl = "http://localhost/schoolbackend/public/api/results";

  getResults (): Observable<Result[]> {
    return this.http.get<Result[]>(apiUrl)
      .pipe(
        tap(results => console.log('Fetch results')),
        catchError(this.handleError('getResults', []))
      );
  }

  addResult (result): Observable<Result> {
    return this.http.post<Result>(apiUrl, result, httpOptions).pipe(
      tap((result: Result) => console.log(`added result w/ id=${result._id}`)),
      catchError(this.handleError<Result>('addResult'))
    );
  }

result-display.component.ts

  ngOnInit() {

    this.api.getResults()
      .subscribe(res => {
        this.data = res;
        console.log(this.data);
        this.isLoadingResults = false;
      }, err => {
        console.log(err);
        this.isLoadingResults = false;
      });
  }

result-add.component.ts

onFormSubmit(form:NgForm) {
    this.isLoadingResults = true;
    this.api.addResult(form)
      .subscribe(res => {
         // let id = res['_id'];
          this.isLoadingResults = false;
          this.router.navigate(['/resultlist']);
        }, (err) => {
          console.log(err);
          this.isLoadingResults = false;
        });
  }  

result-display.component.html

      <tr  *ngFor="let datas of data">
          <td>{{datas.score}}</td>
          <td>{{datas.exam_id}}</td>
        <td>

result-add.component.html

<input type="text" class="form-control" formControlName="score" name="score"  id="score">
<input type="text" class="form-control" formControlName="exam_id" name="exam_id"  id="exam_id">

1. In> {{datas.exam_id}} из

result-display.component.html

Я хочу отображать имя_экзамена (это из таблицы экзаменов), а не имя_экзамена.2. Также в

result-add.component.html

должен быть раскрывающийся список, который отображает имя_экзамена (взятое из таблицы экзаменов)of exam_id.Также следует сохранить идентификатор (exam_id), а не значение (exam_name) в таблице результатов