Untitled

<!-- Declare ng-app-->
<body ng-app="formPizza">
<!--Declare ng-controller-->
<div ng-controller="pizzaController">
<!--The main pizza form markup-->

 <div class = "square">
   <div class=formheader><h1> Make Your Own Pizza </h1>
     <div class=chevron></div> </div>
  <form novalidate class="pizza-picker">
    <!--The Name your Pizza Field. Sets up field for input, uses ng-model to change pizza scope-->

    <p id="top-header">Name Your Pizza</p><input type = "text" ng-model="pizza.name">
    <!--The Size Select Field. Sets up yes/no radio buttons to determine pizza size. Small sets the pizza.size value to 1, Large to 0 Default select is Large(0)-->
    <p>Please Select Size:</p> <input type="radio" ng-model="pizza.size" value="1" class="option" />Small<br/>
   <input type="radio" ng-model="pizza.size" value="0" class="option" />Large<br />
    <!--Cheese yes/no field. Sets up radio buttons yes/no, uses ng-model to change pizza scope, 1 for yes(true) 0 for no(false)-->
   <p>Would you like cheese?:</p> <input type="radio" ng-model="pizza.cheese" value="1" class=pizzaSize id="option" />Yes<br/>
  <input type="radio" ng-model="pizza.cheese" value="0" class=pizzaSize /> No<br />
    <!--The Topping Select Field. Sets up select field. Uses ng-model to change pizza scope and ng options to access array items to select from-->
  <p>Please select your topping:</p> <select ng-model="pizza.topping" ng-options="item for item in items" id="toppSelector">
   </select>
    <!--The Save and Reset Buttons. Use ng-click, actions defined in angularjs-->
  <input type="button" ng-click="reset()" value="Reset" class="save"/>
  <input type="submit" ng-click="update(pizza)" value="Order" class="save" />
  </form>

 <!--Used for Debug, shows the pizza scope as updated, once 'ordered' updates master <pre>pizza = {{pizza | json}}</pre>
  <pre>master = {{master | json}}</pre>-->
 </div>
<!--End of form-->
<!--Beginning of Pizza Markup-->
<div class = "masterpizza">
  <!--Outputs pizza.name that was input in the Name Your Pizza field-->
   <h1 class="pizza-name">{{pizza.name}}</h1>
  <!--Beginning of Small Pizza. Outputs pizza.size result using ng-if. Checks pizzaSize function with current pizza.size value for 1(small)-->
<div ng-if="pizzaSize(pizza.size)==1" class = smallPizza>

   <!--Small sauce option, shown automatically if pizza is declared small-->
  <div class = "smallSauce">
     <!--Small Cheese circle. Uses ng-show to check hasCheese function for true/false. If true, show.-->
    <div ng-show="hasCheese(pizza.cheese)" class = "smallCheese">
       </div>
       <!--Pizza Toppings, each separate topping uses ng-if to check for topping. If function pizzaTopping returns pizza.top as their set value, the nested divs are shown.-->
      <div ng-if="pizzaTopping(pizza.topping)=='Pepperoni'"  class = pepperoni>
        <div class=pep></div>
        <div class=pep></div>
        <div class=pep></div>
        <div class=pep></div>
      </div>
       <div ng-if="pizzaTopping(pizza.topping)=='Sausage'"  class = Sausage>
        <div class=saus></div>
        <div class=saus></div>
        <div class=saus></div>
        <div class=saus></div>
      </div>
       <div ng-if="pizzaTopping(pizza.topping)=='Pineapple'"  class = Pineapple>
        <div class=pine></div>
        <div class=pine></div>
        <div class=pine></div>
        <div class=pine></div>
      </div>

  </div>
  </div>
  </div>
<!--End of Small Pizza-->
  <!--Beginning of Large Pizza. Outputs pizza.size result using ng-if. Checks pizzaSize function with current pizza.size value for 1(Large)-->
<div ng-if="pizzaSize(pizza.size)==0" class = "largePizza" >
  <!--Large sauce option, shown automatically if pizza is declared large-->
  <div class = "sauce">
    <!--Large Cheese circle. Uses ng-show to check hasCheese function for true/false. If true, show.-->
    <div ng-show="hasCheese(pizza.cheese)" class = "cheese"></div>
      <!--Pizza Toppings, each separate topping uses ng-if to check for topping. If function pizzaTopping returns pizza.top as their set value, the nested divs are shown.-->
      <div ng-if="pizzaTopping(pizza.topping)=='Pepperoni'"  class = pepperoni>
        <div class=pepL></div>
        <div class=pepL></div>
        <div class=pepL></div>
        <div class=pepL></div>
        <div class=pepL></div>
        <div class=pepL></div>

      </div>
       <div ng-if="pizzaTopping(pizza.topping)=='Sausage'"  class = Sausage>
        <div class=sausL></div>
        <div class=sausL></div>
        <div class=sausL></div>
        <div class=sausL></div>
        <div class=sausL></div>
        <div class=sausL></div>

      </div>
       <div ng-if="pizzaTopping(pizza.topping)=='Pineapple'"  class = Pineapple>
        <div class=pineL></div>
        <div class=pineL></div>
        <div class=pineL></div>
        <div class=pineL></div>
        <div class=pineL></div>
        <div class=pineL></div>
      </div>

  </div>
  </div>
</div>
  </div>