angularjs form post http interceptor not working -
i new angularjs pardon ignorance. here interceptor have angularjs app
.config(function ($routeprovider, $locationprovider, $httpprovider) { $routeprovider .otherwise({ redirectto: '/' }); $locationprovider.html5mode(true); $httpprovider.interceptors.push('authinterceptor'); }) .factory('authinterceptor', function ($rootscope, $q, $cookiestore, $location) { return { // add authorization token headers request: function (config) { config.headers = config.headers || {}; if ($cookiestore.get('token')) { config.headers.authorization = 'bearer ' + $cookiestore.get('token'); } return config; }, // intercept 401s , redirect login responseerror: function(response) { if(response.status === 401) { $location.path('/login'); // remove stale tokens $cookiestore.remove('token'); return $q.reject(response); } else { return $q.reject(response); } } }; })
i have html posts data server
<form role="form" id="addteacherform" data-validate="parsley" action="/api/v1/teacher" method="post"> <h4>add teacher's data</h4> <div class="form-group"> <div class="row"> <div class="col-xs-12 col-sm-5 col-md-5"> <input type="text" ng-model="teacher.name" name="name" class="form-control input-md" placeholder="name" required="required"> </div> <div class="col-xs-12 col-sm-5 col-md-5"> <input type="date" ng-model="teacher.dob" name="dob" class="form-control input-md" placeholder="date of birth" required="required"> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-xs-12 col-sm-5 col-md-5"> <div class="input-icon"><i class="icon-user"></i> teacher's photo <input type="file" id="teacherphoto" name="teacherphoto" accept="image/*" required="required"> </div> </div> <div class="col-xs-12 col-sm-5 col-md-5"> <div class="form-group"> <input type="text" name="phonenumber" ng-model="teacher.phonenumber" class="form-control input-md" name="phonenumber" placeholder="phone number(optional)"> </div> </div> </div> </div> <div class="form-actions text-center"> <div class="col-xs-12 col-sm-5 col-md-5"> <input type="submit" value="submit" class="btn btn-primary btn-block btn-md"> </div> </div> </form>
now when press submit on form request goes server interceptor doesn't invoked , request fails because headers not populated authorization token. idea why not being intercepted?