title: AngularJS validating input without a form, inside a table
body: <p>My question may seem bizarre, but I've built an angular SPA which allows a user to input information directly into a table using inputs. I did it this way as the data never needs to be submitted anywhere and is used by a service to calculate some values to be displayed at the end. My issue now though is I would like to validate the input to make sure they aren't empty.</p>
  
  <p>I've done some research and all the tutorials I found relied on the input being part of a form, which I'm trying to avoid as the layout in the table looks fine and suits the purpose.</p>
  
  <pre><code>        &lt;table class="text-center"&gt;
                  &lt;tr&gt;
                      &lt;th class="header"&gt;Course Type&lt;/th&gt;
                      &lt;th&gt;Amount of Times&lt;/th&gt;
                      &lt;th&gt;Frequency (PA)&lt;/th&gt;
                      &lt;th&gt;% Staff who need it&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="header"&gt;&lt;label for="induction"&gt;Induction:&lt;/label&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input class="form-control" type="number" id="inductionAmount" ng-model="staff.inductionAmount" /&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input class="form-control" type="number" id="inductionFrequency" ng-model="staff.inductionFrequency" /&gt;&lt;/td&gt;   
                      &lt;td&gt;&lt;p&gt;100&lt;/p&gt;&lt;/td&gt;             
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="header"&gt;&lt;label for="newsLetter"&gt;News letter:&lt;/label&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input class="form-control" type="number" id="newsLetterAmount" ng-model="staff.newsLetterAmount" /&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input class="form-control" type="number" id="newsLetterFrequency" ng-model="staff.newsLetterFrequency" /&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input class="form-control" type="number" id="newsLetterPercent" ng-model="staff.newsLetterPercent" /&gt;&lt;/td&gt;
                  &lt;/tr&gt;
         &lt;/table&gt;
  
      &lt;div class="row margin-top"&gt;
          &lt;div class="col-sm-4 col-sm-offset-4"&gt;
              &lt;button class="button-orange" style="font-size: 16px; font-weight: 700;" ng-click="clicked()"&gt;Next Step&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
  </code></pre>
  
  <p>The information is stored in an object, which is later used to run some calculations for the user, what would be to recommended way to add some basic validation using angular 1.2 to not allow the user to continue if the values are empty? Sorry this is my first angular app. I've done JavaScript validation in the past using on blur etc, but it seems if I can use Angular it would be much simpler.</p>