angularProject/app/views/select-menu-page.html

<div class="select-menu-page" ng-controller="SelectMenuPageController">
  <div class="search">
    <div class="search-wrapper">
      <div class="search-description">
        explore the master kitchen menu:
      </div>
      <div class="search-buttons-wrapper">
        <div class="search-button" ng-click="mealType = 'breakfast'" ng-class="{'search-button-active': mealType == 'breakfast'}">
          Breakfast
        </div>
        <div class="search-button" ng-click="mealType = 'lunch'" ng-class="{'search-button-active': mealType == 'lunch'}">
          Lunch
        </div>
        <div class="search-button" ng-click="mealType = 'dinner'" ng-class="{'search-button-active': mealType == 'dinner'}">
          Dinner
        </div>
        <div class="search-button" ng-click="mealType = 'snacks'" ng-class="{'search-button-active': mealType == 'snacks'}">
          Snacks
        </div>
      </div>
    </div>
  </div>
  <div class="meal-items">
    <div class="meal-item" ng-repeat="meal in meals" ng-if="meal.type == mealType">
      <div class="meal-item-title">
        <h2>{{meal.mealName}}</h2>
      </div>
      <div class="meal-item-img">
        <img ng-src="{{meal.imageUrl}}">
      </div>
      <div class="meal-item-ingredients">
        <h3>Ingredients</h3>
        <ul>
          <li ng-repeat="ingredient in meal.ingredients">- {{ingredient}}</li>
        </ul>
      </div>
      <div class="meal-item-bottom">
        <div class="meal-item-bottom-container">
          <div class="meal-item-price">
            <span>{{meal.price}} USD</span>
          </div>
          <div class="meal-item-btn">
            <button type="button" ng-click="selectMeal($index)">Add</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>