title: AngularJS & Laravel - Wizard navigation
body: <p>I am trying to create a multi form/wizard step navigation. I am using <code>ng-switch</code> to create the steps. But I got stuck, this is the relevant code: </p>
  
  <p><strong>HTML</strong>: </p>
  
  <pre><code>&lt;div ng-controller="stepCtrl"&gt;
  &lt;div ng-switch="step"&gt;
     &lt;div ng-switch-when="1"&gt;
        &lt;div ng-controller="postAddressDataCtrl"&gt;
           &lt;form url="users/createaddress" ng-submit="add()"&gt;
              &lt;label class="input-label"&gt;
              &lt;span class="label-title"&gt;
              Line 1
              &lt;/span&gt;
              &lt;input type="text" name="line-1" ng-model="line1" placeholder="Line 1"&gt;
              &lt;/label&gt;
  
              &lt;label class="input-label"&gt;
              &lt;span class="label-title"&gt;
              Line 2
              &lt;/span&gt;
              &lt;input type="text" name="line-2" ng-model="line2" placeholder="Line 2"&gt;
              &lt;/label&gt;
  
              &lt;label class="input-label"&gt;
              &lt;span class="label-title"&gt;
              City
              &lt;/span&gt;
              &lt;input type="text" name="city" ng-model="city" placeholder="City"&gt;
              &lt;/label&gt;
  
              &lt;label class="input-label"&gt;
              &lt;span class="label-title"&gt;
              Postcode
              &lt;/span&gt;
              &lt;input type="text" name="postcode" ng-model="postcode" placeholder="Postcode"&gt;
              &lt;/label&gt;
  
              &lt;label class="input-label"&gt;
              &lt;span class="label-title"&gt;
              Country
              &lt;/span&gt;
              &lt;input type="text" name="country" ng-model="country" placeholder="Country"&gt;
              &lt;/label&gt;
  
              &lt;input type="hidden" name="_token" value="{{ csrf_token() }}"&gt;
              &lt;div class="form-group"&gt;
                 {{ Form::button('Save Address', array('type'=&gt;'submit', 'class'=&gt;'btn btn-primary', 'style' =&gt; 'width:100%;')) }}
              &lt;/div&gt;
           &lt;/form&gt;
        &lt;/div&gt;
        &lt;button ng-click="setStep(2)"&gt;Step 2&lt;/button&gt;
     &lt;/div&gt;
     &lt;div ng-switch-when="2"&gt;
        Step 2 - another form
        &lt;button ng-click="setStep(1)"&gt;Step 1&lt;/button&gt;
        &lt;button ng-click="setStep(3)"&gt;Step 3&lt;/button&gt;
     &lt;/div&gt;
     &lt;div ng-switch-when="3"&gt;
        Step 3 - another form
        &lt;button ng-click="setStep(2)"&gt;Step 2&lt;/button&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p><hr/> 
  <strong>Controllers:</strong></p>
  
  <p><em>stepCtrl</em></p>
  
  <pre><code>myApp.controller('stepCtrl',function($scope){
      $scope.step = 1;
      $scope.setStep = function(step){
          $scope.step = step;
      } 
  });
  </code></pre>
  
  <p><em>postAddressDataCtrl</em></p>
  
  <pre><code>myApp.controller('postAddressDataCtrl', ['$scope', '$http', 'CSRF_TOKEN', function($scope, $http, CSRF_TOKEN) {
      $scope.urlpath = '{{ url('/') }}';
      $scope.add = function() {
          var line1 = $scope.line1;
          var line2 = $scope.line2;
          var city = $scope.city;
          var postcode = $scope.postcode;
          var country = $scope.country;
  
          return $http({
              url: "/users/createaddress",
              method: "POST",
              data: {
                  'line1': line1,
                  'line2': line2,
                  'city': city,
                  'postcode': postcode,
                  'country': country,
                  '_token': CSRF_TOKEN
              },
          }).success(function(data, status, headers, config) {
                console.log(data);
                if (data.status == 200) {
                    // move to the next step
                }
          }).error(function(data, status, headers, config) {
                console.log(data);
          });
      };
  }]);
  </code></pre>
  
  <p>How can I check if the data entered in the form are valid and if they are then to move in the next step with a single button? </p>
  
  <p><em>How can I set the <code>step</code> equal to <code>2</code> when the <code>data.status</code> is equal to <code>200</code>, so only then it will move on?</em> </p>