angularjs形式后http拦截器无法正常工作

Question

我是棱角分明的新手，所以原谅我的无知。这是我对我的angularjs应用程序的拦截器

.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);
        }
      }
    };
  })

我有一个将数据发布到服务器的html

<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>

现在，当我按下此表单上的提交时，请求将转到服务器，但拦截器不会被调用，并且请求失败，因为标头未填充授权令牌。知道为什么没有被截获吗？