I need to make a filter with angular and linq, in a project in visual studio Wapi rest c #

In my html code, I have a select and I need to select an area and show me all the tables (represented as buttons)

Linq (MesasController.cs)

[ResponseType(typeof(Mesa))]
[System.Web.Http.HttpGet]
[Route("GetMesasPorZona/{idZona}")]
public IQueryable<Mesa> GetMesasPorZona(int idZona) {
    IQueryable<Mesa> Mesas = db.Mesa;
    Mesas = Mesas.Where(x => x.idZona == idZona);
    return Mesas;
}

app.js (angular)

$http.get('/api/ZonaMesas/GetZonaMesa').then(function (response) {
    $scope.Zonas = response.data;
});

$('#VerMesas').on('click', function (e) {
    $http.get('/api/Mesas/GetMesasPorZona/' + document.getElementById("idZona").selectedIndex + 1).then(function (response) {
        $scope.Mesas = angular.fromJson(response.data);
    });
});

and my html is:

<form class="form-horizontal">      
    <div class="form-group">
        <label class="control-label col-xs-4" for="tipo">Seleccione Zona:</label>
        <div class="col-xs-5">
            <select class="form-control" id="listaZonas" required>
                <option ng-repeat="dto in Zonas"> {{dto.nombreZona}} </option>
            </select>
        </div>
        <button type="button" class="btn btn-warning btn-lg" style="margin:auto" id="VerMesas">Ver Mesas</button>
    </div>

    <div class="form-group">                    
        <div class="col-xs-12" id="MesasDiv">
            <div ng-repeat="a in Mesas" class="col-xs-1" style="margin:5%;">
                <button type="button" class="btn btn-warning btn-circle btn-lg" style="margin:auto" id="{{a.numeroMesa}}" ng-click="ModificarEstadoMesa(a)">{{a.numeroMesa}}</button>
                <label>{{a.cantidadMaxima}}</label>
            </div>
        </div>
    </div>
</form>

When I want to bring with the selectedIndex , what I select in the combo (previously loaded with angular) gives me an error, it does not recover the data from a list in null.

I've read other options like using ng-model and calling it from angularjs with $scope ... How could I do such a thing?

Try to do it, but the select looks empty (do not load the values)

<select class="form-control" id="listaZonas" ng-model="Filtro" required>
    <option ng-repeat="dto in Zonas"> {{dto.nombreZona}} </option>
</select>

and

$http.get('/api/Mesas/GetMesasPorZona/' +$scope.Filtro).then(function (response) {
    $scope.Mesas = angular.fromJson(response.data);
});