laravel - AngularJS http action executes multiple foreign event -

i made simple function handle update actions user. simple form

<div class="com-md-12 col-sm-12 no-pad no-margine" ng-controller="profilectrl" ng-init="getprofile('{{$safeid}}')"> {!! form::open(array('class' => 'form-horizontal signup-form', 'ng-submit' => 'updateprofile($event)')) !!}     <div class="form-group">         <div class="col-md-6 col-sm-6">             {!! form::text('first_name', old('first_name'), array('class' => 'form-control', 'placeholder' => 'first name*', 'ng-model' => 'uprofile.first_name')); !!}             {!! messagerservice::setinlineerror($errors->first('first_name')) !!}         </div>         <div class="col-md-6 col-sm-6">             {!! form::text('last_name', old('last_name'), array('class' => 'form-control', 'placeholder' => 'last name*', 'ng-model' => 'uprofile.last_name')); !!}             {!! messagerservice::setinlineerror($errors->first('last_name')) !!}             </div>     </div>     <div class="form-group">         <div class="col-md-12 col-sm-12">             {!! form::text('username', old('username'), array('class' => 'form-control', 'placeholder' => 'screen name*', 'ng-model' => 'uprofile.username')); !!}             {!! messagerservice::setinlineerror($errors->first('username')) !!}         </div>     </div>     <div class="form-group">         <div class="col-md-6 col-sm-6">             {!! form::text('dob', old('dob'), array('class' => 'form-control', 'id' => 'dob', 'placeholder' => 'date of birth*', 'ng-model' => 'uprofile.dob')); !!}             {!! messagerservice::setinlineerror($errors->first('dob')) !!}         </div>         <div class="col-md-6 col-sm-6">                 {!! form::select('gender', ['' => '------ gender ------', 'male' => 'male', 'female' => 'female'], old('gender'),              array('class' => 'form-control', 'ng-model' => 'uprofile.gender')) !!}             {!! messagerservice::setinlineerror($errors->first('gender')) !!}         </div>     </div>     <div class="form-group">         <div class="col-md-12 col-sm-12">             <div class="input-group">                 <span class="input-group-addon" id="p_url_pretext">example.com/</span>             {!! form::text('profile_url', old('profile_url'), array('class' => 'form-control', 'placeholder' => 'profile url*', 'ng-model' => 'uprofile.profile_url')); !!}             </div>               {!! messagerservice::setinlineerror($errors->first('profile_url')) !!}         </div>     </div>     <div class="form-group">         <div class="col-md-12 col-sm-12">             <button type="submit" class="btn btn-default cbtn-login" style="float: right;">save updates</button>         </div>     </div> {!! form::close() !!} </div> 

with angular script this

$scope.updateprofile = function(event){     event.preventdefault();     $http({         method  : 'post',         url     : svrid('www') + '/ws/profile/update',         data    : $.param($scope.uprofile),  // pass in data strings         headers : { 'content-type': 'application/x-www-form-urlencoded' }  // set headers angular passing info form data (not request payload)     }).success(function(data) {         console.log(data);     }).error(function(data) {         console.log(data);     }); }; 

everything worked expected have noticed 1 weird behavior. why there many unrecognized requests before final post action being executed?

i noticed supposed action route http://www.example.com:8000/ws/profile/update somehow keeps on calling http://www.example.com:8000/ws/profile 3 different requests post, get, , delete before reaches intended request shown in image below

anyone have idea causes such behavior happen or have coded wrong in anywhere leads such incident?

update 1: here plunkr file. noted not re-simulate error because site @ localhost

update 2: have narrowed down ng-init="getprofile('{{$safeid}}') might have been causing problem. tried removing line , give constant value , errors not appear. what's such behavior?

i have found out problem causes such behavior. because of jquery's $.param function. happens $.param operation run through properties of object. using $.param object not automatically convert url encoded string (though think should).

so workaround problem create manual serialization function such

function serializedata( data ) {     // if not object, defer native stringification.     if ( ! angular.isobject( data ) ) {         return( ( data == null ) ? "" : data.tostring() );     }     var buffer = [];      // serialize each key in object.     ( var name in data ) {         if ( ! data.hasownproperty( name ) ) {             continue;         }         var value = data[ name ];         buffer.push(             encodeuricomponent( name ) + "=" + encodeuricomponent( ( value == null ) ? "" : value )         );     }      // serialize buffer , clean transportation.     var source = buffer.join( "&" ).replace( /%20/g, "+" );     return( source ); } 

pass form payload serialization function append angular's #http

    $http({             method  : 'post',             url     : svrid('www') + '/ws/profile/update',             data    : serializedata($scope.uprofile),  // pass in data strings             headers : { 'content-type': 'application/x-www-form-urlencoded' }  // set headers angular passing info form data (not request payload)         }).success(function(data) {             $scope.uerror = null;         }).error(function(data) {             $scope.uerror = data;             console.log(data);         }); 

and works charm.