How to display specific data from mysql in index.html with nodejs,angularjs

Apologise for my poor formatting for the question. i am new to nodejs,angularjs. I am trying to make my display output of my index.html of the food name and price.

I have set up the connection of my sql database using a script below index.html. The console log is showing the correct result but in the body html, i could not display the food name and price.

<!doctype html>
<html>
 <head>
  <title>Food Stuff</title>

 </head>
 <body ng-app='myapp'>
     <script data-main="config" src="require-2.1.22.js"></script>
    <table >
      <tr>
        <th>Food Name</th>
        <th>Food Price</th>
      </tr>
      <tr>
        <td>{{burger}}</td> //not working
        <td>{{price}}</td> //not working
      </tr>
    </table>
  </div>
 </body>

 <script>
      var mysql = require('mysql');

      var connection = mysql.createConnection({
        host: "localhost",
        user: "root",
        password: "password",
        database : "food"
      });

      connection.connect((err) =>{
          if (err){
              return console.log(err.stack);
          }

          console.log("Connection established");
      });

      //Query start
      $queryString = 'SELECT * FROM `food_item` LIMIT 10;';
      connection.query($queryString, (err, results, fields)=>{
        if (err){
          return console.log("An error has occured", err);
        }
        console.log(results);
        var burger = (results[0].food_name);
        var price = (results[0].food_price);

      });
      connection.end(()=>{
          console.log("Connection closed");

      });
  </script>
</html>


i expect the html to be show in the localhost to be

 Food Name Food Price
 Burger        10

Source: AngularJS