<div ng-controller="MenuController">
<figure class="menu_jumbotron">
<ul class="breadcrumb">
  <li><a href="home">Home</a></li>
  <li>Menu</li>
</ul>
</figure>
<div class="menu">
<h1><i>{{title}}</i></h1>
<div class="menu_button">
<figure>
  <div>
    <span>Breakfast</span>
    <span>100% Organic</span>
  </div>
</figure>
<figure>
  <div>
    <span>Lunch</span>
    <span>100% Organic</span>
  </div>
</figure>
    <figure>
  <div>
    <span>Dinner</span>
    <span>100% Organic</span>
  </div>
</figure>
<figure>
  <div>
    <span>Beverages</span>
    <span>100% Organic</span>
  </div>
</figure>
<figure>
  <div>
    <span>Desserts</span>
    <span>100% Organic</span>
  </div>
</figure>
</div>
<div>
<table style="background-color:white; margin-left:500px">
    <thead>
        <th style="border:1px solid red">Name</th>
        <th style="border:1px solid red">Price</th>
        <th style="border:1px solid red">Meal Type</th>
    </thead>
    <tbody>
        <tr ng-repeat="item in all_items" >
            <td>{{ item.Name }}</td>
            <td>{{ item.Price }}</td>
            <td>{{ item.MealType }}</td>
        </tr>
    </tbody>
</table>
</div>
</div>
</div>

<?php
$host = "localhost";
$user = "root";
$password = "kkkratika";
$db = "meoan_organics";

$con = new mysqli($host,$user,$password,$db);

if(!$con)
{
die('Unsuccessful Connection');
}

$sql = "SELECT * FROM `meoan_all_food_items`";

$q = $con->query($sql);

$data = array();

if($q->num_rows >0)
{
while($row = $q->fetch_object())
{
$data[] = $row;
}
}
else
{
$data[] = null;
}

$con->close();
echo json_encode($data);
?>

/// <reference path="route.js" />

app.controller("MenuController",['$scope', '$http', '$log', function ($scope,$http,$log) {
        $scope.title = "Our Menu";

        $http.get('database/popdata.php')
        .then(function(data){
        $scope.all_items = data;
        }),function(err){
        $log.error(err);
        }
}]);