angularjs form post http interceptor not working - angularjs

Question

i am new to angularjs so pardon my ignorance. Here is the interceptor i have for my 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 to headers
request: function (config) {
config.headers = config.headers || {};
if ($cookieStore.get('token')) {
config.headers.Authorization = 'Bearer ' + $cookieStore.get('token');
}
return config;
},
// Intercept 401s and redirect you to login
responseError: function(response) {
if(response.status === 401) {
$location.path('/login');
// remove any stale tokens
$cookieStore.remove('token');
return $q.reject(response);
}
else {
return $q.reject(response);
}
}
};
})
I have an html which posts the data to the server
<form role="form" id="addTeacherForm" data-validate="parsley" action="/api/v1/teacher" method="post">
<h4>Add your 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 i press submit on this form the request goes to the server but the interceptor doesn't get invoked and the request fails because the headers are not populated with the authorization token. Any idea why this is not being intercepted?