fix(timepicker): remove form so deep validation works

Author: Justin Hall

src/timepicker/docs/demo.html

@@ -1,8 +1,8 @@
 <div ng-controller="TimepickerDemoCtrl">
 
-  <div ng-model="mytime" ng-change="changed()" class="well well-small" style="display:inline-block;">
+  <div ng-model="mytime" ng-change="changed()" class="row" style="display:inline-block;">
     <div class="row">
-      <div class="col-lg-5">
+      <div class="col-xs-5 col-lg-5">
         <timepicker hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
       </div>
     </div>
@@ -12,11 +12,11 @@
    <pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>
 
   <div class="row"> 
-    <div class="col-lg-6">
+    <div class="col-xs-6">
         Hours step is:
       <select class="form-control" ng-model="hstep" ng-options="opt for opt in options.hstep"></select>
     </div>
-    <div class="col-lg-6">
+    <div class="col-xs-6">
         Minutes step is:
       <select class="form-control" ng-model="mstep" ng-options="opt for opt in options.mstep"></select>
     </div>

template/timepicker/timepicker.html

@@ -1,38 +1,38 @@
-<form class="form-inline">
+<span>
     <div class="row">
-        <div class="col-md-4 text-center">
+        <div class="col-xs-4 text-center">
             <a ng-click="incrementHours()" class="btn btn-link"><i class="glyphicon glyphicon-chevron-up"></i></a>
         </div>
-        <div class="col-md-6 text-center">
+        <div class="col-xs-6 text-center">
             <a ng-click="incrementMinutes()" class="btn btn-link"><i class="glyphicon glyphicon-chevron-up"></i></a>
         </div>
-        <div class="col-md-2"> </div>
+        <div class="col-xs-2"> </div>
     </div>
 
     <div class="row">
-        <div class="col-md-4">
+        <div class="col-xs-4">
             <div class="form-group" ng-class="{'has-error': invalidHours}" style="margin-bottom: 0px">
-                <input type="text" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-mousewheel="incrementHours()" ng-readonly="readonlyInput" maxlength="2" /> 
+                <input type="text" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-mousewheel="incrementHours()" ng-readonly="readonlyInput" maxlength="2"> 
             </div>
         </div>
-        <div class="col-md-6">
+        <div class="col-xs-6">
             <div class="input-group" ng-class="{'has-error': invalidMinutes}">
                 <span class="input-group-addon">:</span>
                 <input type="text" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" ng-readonly="readonlyInput" maxlength="2">
             </div>
         </div>
-        <div class="col-md-2">
+        <div class="col-xs-2">
             <button ng-click="toggleMeridian()" class="btn btn-default text-center" ng-show="showMeridian">{{meridian}}</button>
         </div>
     </div>
 
     <div class="row">
-        <div class="col-md-4 text-center">
+        <div class="col-xs-4 text-center">
             <a ng-click="decrementHours()" class="btn btn-link"><i class="glyphicon glyphicon-chevron-down"></i></a>
         </div>
-        <div class="col-md-6 text-center">
+        <div class="col-xs-6 text-center">
             <a ng-click="decrementMinutes()" class="btn btn-link"><i class="glyphicon glyphicon-chevron-down"></i></a>
         </div>
-        <div class="col-md-2"> </div>
+        <div class="col-xs-2"> </div>
     </div>
-</form>
+</span>