title: BookYourSeat: Automatic Seat Selection on Click using AngularJS [GIF]
body: <h1>BookyourSeat:</h1>
  
  <p>It is an angularJs app that helps you book your seats for a movie show similar to bookmyshow .</p>
  
  <p><a href="https://i.stack.imgur.com/PZk1I.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PZk1I.gif" alt="Seat Selection GIF"></a>]</p>
  
  <p>What the User Can Do (<strong>User Cases</strong>)? </p>
  
  <ol>
  <li><p>Select and Deselect the Seats with respect to the selectedVal, i.e if the 
  selectedVal = 4 then the user can select only 4 seats in total.</p></li>
  <li><p>if the SelectedVal is less than 1 then the user should not be able
  to select the seat anymore unless the user deselect any of the
  previously selected seats and select again.</p></li>
  <li><p>Booked Seats Case: If the check value of a seat is true, then the
  user should not be able to select or deselect that seat(a.blocked
  CSS rule is Added for that purpose) since it is already selected by
  another user(Lets assume).</p></li>
  </ol>
  
  <h2>Automatic Seat Selection Cases</h2>
  
  <blockquote>
    <p>As shown in the GIF</p>
  </blockquote>
  
  <ol>
  <li>If the user selects 3 seats and click on the first seat in the first row it should automatically select 2 and 3 on the same row.</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/luOGX.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/luOGX.gif" alt="First Case select Consecutive result"></a></p>
  
  <ol start="2">
  <li>If the user Selects 3 seats and clicks on the second last seat in the row then last two seats should be filled and the remaining seat should be filled where ever the user clicks.</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/6PrOW.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6PrOW.gif" alt="Second Case remaining seat selection case"></a></p>
  
  <ol start="3">
  <li>If the user selects 3 seats and clicks on only the last seat then only that seat should be filled. </li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/MjiiN.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MjiiN.gif" alt="Last seat selection in the row"></a></p>
  
  <p><strong>In case of 4 seats.</strong> </p>
  
  <p><a href="https://i.stack.imgur.com/4DwNa.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4DwNa.gif" alt="4 Seats selected but in different rows"></a></p>
  
  <p>Problem:</p>
  
  <p>I am able to achieve the automatic selection process using <code>angular.forEach()</code> but cannot all the logics correctly.</p>
  
  <pre><code>$scope.execute = function(i, j, itemVal, itemLetter) {
          angular.forEach($scope.obj, function(v, k) {
            if (v[i].val == itemVal &amp;&amp; v[i].letter == itemLetter) {
              if (v[i].seat == true || ($scope.isDisabled &amp;&amp; v[i].check == false)) {
                return;
              }
              v[i].check = !v[i].check;
              if (v[i].check)
                $scope.selectedVal -= 1;
              else
                $scope.selectedVal += 1;
  
             //seatSelection
              var m = i;
              for (var l = 0; l &lt; $scope.selectedVal; l++)
                v[m++].check = true;
                  //seatSelectionEnd
  
              console.log(itemVal + " " + itemLetter);
              if ($scope.selectedVal &lt; 1) {
                $scope.isDisabled = true;
              } else {
                $scope.isDisabled = false;
              }
            }
          });
        };
      }])
  </code></pre>
  
  <p>Working Fiddle: <a href="https://jsfiddle.net/rittamdebnath/5vqxgtq3/11/" rel="nofollow noreferrer">https://jsfiddle.net/rittamdebnath/5vqxgtq3/11/</a></p>