title: AngularJS Circular dependency found: $http <- Auth <- AuthInterceptor <- $http <- $templateRequest <- $compile
body: <p>I am learning Angular from a book, and am getting the following error in my Chrome console...</p>
  
  <p><strong><em>"Circular dependency found: $http &lt;- Auth &lt;- AuthInterceptor &lt;- $http &lt;- $templateRequest &lt;- $compile"</em></strong></p>
  
  <p>Here is the code from the relevant files..any help would be greatly appreciated, as I am a total noob with Angular :(</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  
      &lt;meta char-set="UTF-8"&gt;
      &lt;!--FOR ANGULAR ROUTING--&gt;
      &lt;base href="/"&gt;
      &lt;link rel="stylesheet" href="assets/css/style.css"&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.js"&gt;&lt;/script&gt;
  
      &lt;script src="app/controllers/mainCtrl.js"&gt;&lt;/script&gt;
      &lt;script src="app/controllers/userCtrl.js"&gt;&lt;/script&gt;
      &lt;script src="app/services/authService.js"&gt;&lt;/script&gt;
      &lt;script src="app/services/userService.js"&gt;&lt;/script&gt;
  
      &lt;script src="app/app.routes.js"&gt;&lt;/script&gt;
      &lt;script src="app/app.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body ng-app="userApp" ng-controller="mainController as main"&gt;
  
      &lt;header&gt;
          &lt;ul&gt;
              &lt;li ng-if="!main.loggedIn"&gt;
                  &lt;a href="/login"&gt;Login!&lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li ng-if="main.loggedIn"&gt;
                  Hello, {{main.user.name}}
              &lt;/li&gt;
  
              &lt;li ng-if="main.loggedIn"&gt;
                  &lt;a href="#" ng-click="main.doLogout()"&gt;Logout&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/header&gt;
  
      &lt;main&gt;
          &lt;div ng-view&gt;&lt;/div&gt;
      &lt;/main&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>angular.module('userApp', [
  'app.routes',
  'authService',
  'mainCtrl',
  'userCtrl',
  'userService'
  ])
  
  .config(function($httpProvider) {
      //Attach our auth interceptor to integrate token into request.
      $httpProvider.interceptors.push('AuthInterceptor');
  });
  </code></pre>
  
  <p><strong>authService.js</strong></p>
  
  <pre><code>angular.module('authService',[])
  
  .factory('Auth', function($http, AuthToken) {
  
  var authFactory = {};
  
  //Login
  authFactory.login = function(username, password) {
      return $http.post('/login', {
          username: username,
          password: password
      })
      .success(function(data){
          AuthToken.setToken(data.token);
          return data;
      });
  };
  
  //Logout
  authFactory.logout = function() {
      AuthToken.setToken();
  };
  
  //Check if user is logged in.
  authFactory.isLoggedIn = function() {
      if (AuthToken.getToken())
          return true
      else
          return false
  
  };
  
  authFactory.getUser = function() {
  
      if (AuthToken.getToken())
          return $http.get('/api/users/me', { cache: true });
      else
          return $q.reject({ message: 'User has no token' });
  };
  
  return authFactory;
  
  })
  
  .factory('AuthToken', function($window) {
  
  var authTokenFactory = {};
  
  //Get auth token
  authTokenFactory.getToken = function() {
      return $window.localStorage.getItem('token');
  };
  
  //Set or clear auth token
  authTokenFactory.setToken = function(token) {
      if (token) {
          $window.localStorage.setItem('token', token);
      };
  };
  
  return authTokenFactory;
  
  })
  
  .factory('AuthInterceptor', function($q, $location, Auth) {
  
      //Add token to all requests.
  
      var authInterceptorFactory = {};
  
      authInterceptorFactory.request = function(config) {
  
          var token = Auth.getToken();
  
          if (token) {
              config.headers['x-access-token'] = token;
          };
  
          return config;
  
      };
  
      authInterceptorFactory.responseError = function(response) {
  
          if (response.status == 403) {
              AuthToken.setToken();
              $location.path('/login');
          };
  
          return $q.reject(response);
      };
  
      return authInterceptorFactory;
  
  });
  </code></pre>
  
  <p><strong>mainCtrl.js</strong></p>
  
  <pre><code> angular.module('mainCtrl', [])
  
   .controller('mainController', function($rootScope, $location, Auth) {
  
     var vm = this;
  
     // get info if a person is logged in
     vm.loggedIn = Auth.isLoggedIn();
  
     // check to see if a usre is logged in on every request
     $rootScope.$on('$routeChangeStart', function() {
       vm.loggedIn = Auth.isLoggedIn();
  
       // get user information on route change
       Auth.getUser()
         .success(function(data) {
           vm.user = data;
         });
     });  
  
     // function to handle login form
     vm.doLogin = function() {
  
       // call the Auth.login() function
       Auth.login(vm.loginData.username, vm.loginData.password)
         .success(function(data) {
  
           // if a user successfully logs in, redirect to users page
          if (data.success)
            $location.path('/users');
          else
            vm.error = data.message;
  
         });
     };
  
     // function to handle logging out
     vm.doLogout = function() {
       Auth.logout();
       // reset all user info
       vm.user = {};
       $location.path('/login');
     };
  
   });
  </code></pre>