title: Dynamic day and time field according to Number of lectures in AngularJs
body: <p>I want to create dynamic fields (input :day and time) according to Number of lectures a tutor takes.</p>
  
  <p>For e.g : If there is only one lecture per week, then a dropdown for a day input  and two input type time will be created for timings from to like 2.00pm to 3:00 pm. For 2 lectures per week first day input then two time input followed by second day input and two time input.</p>
  
  <p>I tried using jquery and its working but that was little complex by and using jquery with angular 'not a good idea.'</p>
  
  <p>I Tried : </p>
  
  <pre><code>&lt;fieldset style="display:none;" class="slot" &gt;
          &lt;div ng-repeat="i in days | limitTo:-lectures"&gt;
  
              &lt;label&gt;{{$index+1}}
                  &lt;span&gt;Select Day : &lt;/span&gt;
                  &lt;span&gt;
                  &lt;select ng-model="day" ng-options="x for x in days" ng-blur="sendTiming()"&gt;&lt;/select&gt;
                  &lt;/span&gt;
              &lt;/label&gt;
  
              &lt;label&gt;Select Duration
                  &lt;span &gt;
                      &lt;p id='datepair{{$index + 1}}' name='datepair{{$index + 1}}' class='datepair' data-language='javascript'&gt;
                          &lt;input type='text' class='time start' name='timefrom[{{$index + 1}}]' id='timefrom{{$index + 1}}' ng-model="fromtime[]" required ng-blur="sendTiming()" ng-value=""/&gt; to 
                          &lt;input type='text' class='time end' id='timeto{{$index + 1}}' name='timeto[{{$index + 1}}]' ng-model="totime" required ng-blur="sendTiming()" ng-value=""/&gt;
                      &lt;/p&gt;
                  &lt;/span&gt;
              &lt;/label&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
  </code></pre>
  
  <p>Any idea is welcome.
  Thanks</p>
  
  <p>EDIT: here is a fiddle : <a href="https://jsfiddle.net/8btsqbnu/" rel="nofollow">https://jsfiddle.net/8btsqbnu/</a></p>