Undefined variable: tags, display data from database on bootstrap modal

I have simple CRUD app , in which I want to display tags in bootstrap pop up modal.

Here is what I have tried so far.

Tags controller

class TagController extends Controller
{


    public function index()
    {
        $tags =Tag::all();
        return view('pages.index')->withTags($tags);
    }


    public function store(Request $request)
    {
        $this->validate($reguest, array('name'=>'required|max:255'));
        $tag = new Tag;
        $tag->name = $request->name;
        $tag->save();
        $request->session()->flash('succes', 'Tag was successful created!');
        return redirect()->route('pages.index');
    }


}

Now I want to display these tags to a view associated with another controller PageListController

Here are view pages.index

@extends('layouts.app', ['activePage' => 'table', 'titlePage' => __('Table List')])

@section('content')
<div class="card-body">
    <div class="table-responsive">
      <table class="table">
        <thead class=" text-primary">
          <th>
            ID
          </th>
          <th>
            Page Name
          </th>
          <th>
          Articles
          </th>
          <th>
            Tags
          </th>

        </thead>
        <tbody>
          @foreach ($pages as $page)

          <tr>
              <td>
                
              </td>
              <td>
                
              </td>
              <td>
                
              </td>
              <td>
                    <button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#tagsModel">
                            
                          </button>

                              <!-- Modal -->
                              <div class="modal fade" id="#tagsModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                  <div class="modal-content">
                                    <div class="modal-header">
                                      <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                      </button>
                                    </div>
                                    <div class="modal-body">
                                        <table class="table">
                                            <thead class=" text-primary">
                                              <th>
                                                ID
                                              </th>
                                              <th>
                                               name
                                              </th>
                                            </thead>
                                            <tbody>
                                                @foreach ($tags as $tag)   
                                                <tr>
                                                    <td>
                                                        
                                                    </td>
                                                    <td>
                                                       
                                                    </td>
                                                </tr>
                                                @endforeach

                                            </tbody>
                                          </table>
                                    </div>
                                    <div class="modal-footer">
                                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                      <button type="button" class="btn btn-primary">Save changes</button>
                                    </div>
                                  </div>
                                </div>
                              </div>
                </div>
              </td>

          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
@endsection

Here is my routes file web.php

<?php

Route::get('/', function () {
    return view('welcome');
});
Auth::routes();

Route::get('/home', 'HomeController@index')->name('home')->middleware('auth');
Route::resource('pages', 'PageListController');
Route::resource('pages', 'TagController');


Route::group(['middleware' => 'auth'], function () {
    Route::get('table-list', function () {
        return view('pages.index');
    })->name('table');
});

Route::group(['middleware' => 'auth'], function () {
    Route::resource('user', 'UserController', ['except' => ['show']]);
    Route::get('profile', ['as' => 'profile.edit', 'uses' => 'ProfileController@edit']);
    Route::put('profile', ['as' => 'profile.update', 'uses' => 'ProfileController@update']);
    Route::put('profile/password', ['as' => 'profile.password', 'uses' => 'ProfileController@password']);
});

I just want to display tags using bootstrap modal pop up.

Now when I run my app I get the following error

Undefined variable: pages (View: C:\custom-xammp\htdocs\royalad-dashboard\resources\views\pages\index.blade.php)

What am I doing wrong in my code? any help or suggestions will be appreciated

via Chebli Mohamed