Pass Variable from jQuery to Angular

Here's my select HTML

<label for="SelectMenu">Select the Menu</label><br>
<select id="SelectMenu" name="SelectMenu" ng-init="">
  <?php foreach ($list as $lista): ?>
  <option value="<?php echo $lista->MENU_ID; ?>"><?php echo $lista->MENU_NAME; ?></option>
  <?php endforeach;  ?>
</select>

I have the following jQuery code to get me the id from any giving option in a select.

$("#SelectMenu").change(function() {
var id = $(this).find("option:selected").val();
console.log(id); });

And then this Angular Code to fill out a table with ng-repeat.

var app = angular.module('myApp', []);
app.controller('dishesCtrl', function($scope, $http) {
// var id = 1;
$http.get('http://192.168.1.162/dw/rest/menu_info/' + id)
    .then(function(response) {
        $scope.info = response.data;
    });
});

Here's the table that is populated with the Angular Code:

<table class="table table-striped table-hover" ng-controller="dishesCtrl">
    <th> Dish </th>
    <th> Type</th>
    <th> Price (€)</th>
    <tr ng-repeat="x in info">
        <td> {{x.DISH_NAME}} </td>
        <td> {{x.DISH_TYPE}} </td>
        <td> {{x.PRICE_VALUE}} </td>
    </tr>
</table>

The problem is that i can't seem to pass the id attribute that i get from jQuery to the $http.get, however if i declare id inside the angular code it works fine. The idea is that every time someone changes the option for the restaurant in the select it updates the table with the new menu data. Thanks ! Any Suggestions to make it work?