product-panels.html

    <section ng-init="panel.selectTab(1)"> 
     <!-- Initialization is now in controller (see app.js) -->
       <ul class = "nav nav-pills"> <!-- Twitter bootstrap tabs class-->
        <li ng-class="{active: panel.isSelected(1) }">
         <a href ng-click="panel.selectTab(1) ">Description</a> 
        </li> 
        <li ng-class="{active: panel.isSelected(2) }"> 
         <a href ng-click="panel.selectTab(2) ">Specification</a>
        </li>
        <li ng-class="{active: panel.isSelected(3) }"> 
         <a href ng-click="panel.selectTab(3) ">Reviews</a>
        </li>
      
      
       </ul>
      {{tab}}
      {{panel.isSelected(1)}}
      <!-- Angular JS magic: we never defined tab, but clicking automatically updates the data --> 
      <!-- When ng-click changes the value of "tab", 
           the {{tab}} expression automatically gets updated
           
           Expressions define a 2-way Data Binding, which means expressions are re-evaluated 
           when a property changes. 
           -->
           
      <!-- Now, the panels (contents of the tabs) -->
      
      <div class="panel" ng-show="panel.isSelected(1)">
         <h4>Description</h4>
         <p>{{product.description}}</p>
      </div>
      <div class="panel" ng-show="panel.isSelected(2)">
         <h4>Specification</h4>
         <blockquote>NYI</blockquote>
      </div>
      <div class="panel" ng-show="panel.isSelected(3)">
         <h4>Reviews</h4>
          <blockquote ng-repeat="review in product.reviews">
           <b>Stars: {{review.stars}}</b>
           {{review.body}}
           <cite> by: {{review.author}}</cite>
          </blockquote>
          
      <form name="reviewForm" ng-controller="ReviewController as reviewCtrl"
                              ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)"
                              novalidate>
       <!-- Submission just updates the local copy of the product, does not save it to server or anything -->
          <blockquote>
           <b>Stars: {{reviewCtrl.review.stars}}</b>
           {{reviewCtrl.review.body}}
           <cite> by: {{reviewCtrl.review.author}}</cite>
          </blockquote>
       <select ng-model="reviewCtrl.review.stars" required>
        <!-- ng-model binds the form element value to the property --> 
        <option value = "1">1 star</option>
        <option value = "2">2 stars</option>
        <option value = "3">3 stars</option>
        <option value = "4">4 stars</option>
        <option value = "5">5 stars</option>
        
       </select>
       <textarea ng-model="reviewCtrl.review.body" required></textarea>
       <!-- ng-model binds the form element value to the property -->
       <label>by:</label>
       <input ng-model="reviewCtrl.review.author" type="email" required/>
       <!-- ng-model binds the form element value to the property -->
       
       <div> reviewForm is {{reviewForm.$valid}}</div> <!-- 
       'reviewForm' is the name of the <form> element
       '.$valid' is an Angular-built-in boolean that tells if the form is valid or not -->
       <input type="submit" value="Submit"/>
      </form>
      </div>
      
      

      
     </section>