$state.go not working in single controller

Question

everyone. I am having a strange problem...I have several states in my app, and they all seem to work except inside of one controller. I have posted the factory whose function I am trying to use, along with the controller, and the state, and the view that is supposed to trigger the function:

app.factory('handleShipping', ['$http', function($http){
var handleShipping = {};
handleShipping.validate = function(address){
    return ($http.post('/shipping/validate',address).success(function(data){
        console.log(JSON.stringify(data));
    }));
}
    return handleShipping;

}]);

...

app.controller('ValidateCtrl',['$scope','$state', 'handleShipping','shipperName', 'auth',function($scope, $state, handleShipping, shipperName,auth){

    $scope.getShipper = function(shipName){
        shipperName.shipper = shipName;
    };


    $scope.validateAddress = function(){
        handleShipping.validate($scope.user).error(function(error){
            $scope.error = error;console.log('Error!');
        }).then(function(){
            $state.go('label');
        });
    };
}]);

...

 .state('address', {
                url: '/address', 
                templateUrl: '/address.html',
                controller: 'ValidateCtrl'
        })
 .state('label', {
               url: '/label', 
               templateUrl: '/label.html', 
               controller: 'LabelCtrl'
        });

...

<script type="text/ng-template" id="/address.html">
  <div class="page-header">

    <h1>Address, please</h1>

  </div>

  <div ng-show="error" class="alert alert-danger row">
    <span>{{ error.message }}</span>
  </div>

  <form ng-submit="validateAddress()"
    style="margin-top:30px;">


    <div class="form-group">
      <input type="text" class="form-control" placeholder="Street"
      ng-model="user.street"></input>
    </div>
    <div class="form-group">
      <input type="text"
      class="form-control"
      placeholder="City"
      ng-model="user.city"></input>
    </div>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="State" ng-model="user.state"></input>
    </div>
    <div class="form-group">
     <input type="text"
      class="form-control"
      placeholder="Zip Code"
      ng-model="user.zipCode">
     </input>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</script>

I get no error message. If I type localhost:3000/label, I can see the view. Also, I notice something sort of strange...if I stay on the view 'address', and I push the 'submit' button, nothing happens. But if I leave the page alone, and the app running on terminal, it will randomly show the error message in the console, and on the terminal, I will see

POST /shipping/validate - - ms - -

Any help would be greatly appreciated.

Answer 1

Factory method should return a promise. Currently you are using success & error callbacks inside service, It is not allowing you chain promise over validate function. You must be getting an error in console. $state.go isn't working because execution isn't went to that line.

After returning promise you need to chain that promise using .then after validate method call.

Factory

handleShipping.validate = function(address){
    return $http.post('/shipping/validate',address);
};

Controller

$scope.validateAddress = function(){
    handleShipping.validate($scope.user).then(function(data){ //success
        //$state.go('label');
    }, function(error){ //error
        $state.go('label');
    })
};