<div class="add-item-page" ng-controller="AddItemPageController">
  <div class="form-wrapper">
    <form ng-submit='sendMeal()'>
      <label for="meal-name"><h2>Enter the name of the meal:</h2></label>
      <input type="text" id="meal-name" ng-model="resObj.mealName">
      <h2>Enter ingredients:</h2>
      <div class="ingredient-wrapper"  ng-repeat="ingredient in resObj.ingredients track by $index">
        <input type="text" ng-model="resObj.ingredients[$index]">
        <span ng-click="deleteIngredient($index)" class="fa fa-times"></span>
      </div>
      <button type="button" ng-click="addIngredient()">Add ingredient</button>
      <input type="text" placeholder="image url" ng-model="resObj.imageUrl">
      <select ng-model="resObj.type">
        <option value="" disabled selected>Select meal type</option>
        <option value="breakfast">Breakfast</option>
        <option value="lunch">Lunch</option>
        <option value="dinner">Dinner</option>
        <option value="snacks">Snacks</option>
      </select>
      <input type="text" ng-model="resObj.weight" placeholder="weight">
      <input type="text" ng-model="resObj.price" placeholder="price">
      <button type="submit">Send</button>
    </form>
  </div>
</div>
