javascript - How to make menu work with ngRoute on AngularJS? -

how make menu work normal menues in online shops? i`ve got menu,when click on element should redirect me myshop.com/food food depends on clicked in menu.it should work ngroute,but how make products appear there? maybe somehow can make http call object?

ngroute:

mainapp.config(function ($routeprovider) { $routeprovider.when("/pizza", {     templateurl: "food.html" }).otherwise({     templateurl: "food.html" }); 

menu code:

<li><a href="#!pizza">pizza</a></li> <li><a href="#!burgers">burgers</a></li> <ng-view></ng-view>

food.html

   <div class="food-show-block">             <div class="block-container">                 <div class="block item-block food-block" id="foodblock" ng-repeat="product in food.slice(((currentpage-1)*itemsperpage), ((currentpage)*itemsperpage)) | filter:search" ng-mouseenter="showbasket=true" ng-mouseleave="showbasket=false">                     <div class="basket" ng-show="showbasket"> <i class=" fa fa-shopping-basket fa-4x" aria-hidden="true"></i> </div>                     <a href="#"> <img src="{{product.imagelink}}" alt="">                         <div class="details">                             <p class="price">{{product.price}}грн</p>                             <p class="name"> {{product.name}}</p>                          </div>                     </a>                 </div>              </div>         </div> 

by using controllers

with $routeprovider can define controller each view, :

mainapp.config(function ($routeprovider) { $routeprovider.when("/pizza", {     templateurl: "food.html",     controller : "pizzactrl" }).otherwise({     templateurl: "food.html",     controller : "foodctrl" }); 

in controller write logic calling http service

mainapp.controller('foodctrl', function($scope, $http) {     $http.get("httpgeturl")       .then(function(response) {        $scope.yourobject = response.data;//response        });     });