AngularJS & Laravel - Wizard navigation -

i trying create multi form/wizard step navigation. using ng-switch create steps. got stuck, relevant code:

html:

<div ng-controller="stepctrl"> <div ng-switch="step">    <div ng-switch-when="1">       <div ng-controller="postaddressdatactrl">          <form url="users/createaddress" ng-submit="add()">             <label class="input-label">             <span class="label-title">             line 1             </span>             <input type="text" name="line-1" ng-model="line1" placeholder="line 1">             </label>              <label class="input-label">             <span class="label-title">             line 2             </span>             <input type="text" name="line-2" ng-model="line2" placeholder="line 2">             </label>              <label class="input-label">             <span class="label-title">             city             </span>             <input type="text" name="city" ng-model="city" placeholder="city">             </label>              <label class="input-label">             <span class="label-title">             postcode             </span>             <input type="text" name="postcode" ng-model="postcode" placeholder="postcode">             </label>              <label class="input-label">             <span class="label-title">             country             </span>             <input type="text" name="country" ng-model="country" placeholder="country">             </label>              <input type="hidden" name="_token" value="{{ csrf_token() }}">             <div class="form-group">                {{ form::button('save address', array('type'=>'submit', 'class'=>'btn btn-primary', 'style' => 'width:100%;')) }}             </div>          </form>       </div>       <button ng-click="setstep(2)">step 2</button>    </div>    <div ng-switch-when="2">       step 2 - form       <button ng-click="setstep(1)">step 1</button>       <button ng-click="setstep(3)">step 3</button>    </div>    <div ng-switch-when="3">       step 3 - form       <button ng-click="setstep(2)">step 2</button>    </div> </div> </div>  

---

controllers:

stepctrl

myapp.controller('stepctrl',function($scope){     $scope.step = 1;     $scope.setstep = function(step){         $scope.step = step;     }  }); 

postaddressdatactrl

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 next step               }         }).error(function(data, status, headers, config) {               console.log(data);         });     }; }]); 

how can check if data entered in form valid , if move in next step single button?

how can set step equal 2 when data.status equal 200, move on?

use angular's form validation. example add required input field if want require field , ng-minlength or ng-maxlength character limits. can write custom validation if need specific validation on fields.

to change step can increment step variable inside ng-submit. increment if $http request successful can put directly in .success function.

<form url="users/createaddress" ng-submit="add()" novalidate>     <label class="input-label">         <span class="label-title">         line 1         </span>         <input type="text" name="line-1" ng-model="line1" placeholder="line 1" ng-minlength=3 ng-maxlength=20 required>     </label>     <button type="submit" class="btn btn-primary">save address</button> </form> 

postaddressdatactrl

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 next step                   $scope.step += 1;               }         }).error(function(data, status, headers, config) {               console.log(data);         });     }; }]);