title: automatically redirect page in angularjs
body: <p>In a angularjs project, I want when user doesn't sign in, page is automatically redirect to login page. For this, I when user want see a page, if doesn't sign in before, I send <code>401</code> from rails sever by below code:</p>
  
  <pre><code>def failure
      render :status =&gt; 401, :json =&gt; { :success =&gt; false, :info =&gt; "Login Credentials Failed" }
    end
  </code></pre>
  
  <p>and I recieve this in chrome browser:</p>
  
  <pre><code> GET http://localhost:3000/api/record.json 401 (Unauthorized) angular.min.js?body=1:81
  (anonymous function) angular.min.js?body=1:81
  t angular.min.js?body=1:76
  f angular.min.js?body=1:74
  I angular.min.js?body=1:102
  I angular.min.js?body=1:102
  (anonymous function) angular.min.js?body=1:103
  h.$eval angular.min.js?body=1:114
  h.$digest angular.min.js?body=1:111
  h.$apply angular.min.js?body=1:115
  t angular.min.js?body=1:75
  y angular.min.js?body=1:79
  x.onreadystatechange
  </code></pre>
  
  <p>And I have below code in angularjs controller to redirect page:</p>
  
  <pre><code>'use strict';
  
  angular.module('app',['ngRoute', 'ngResource', 'sessionService', 'recordService'])
          .config(['$httpProvider', function($httpProvider){
              $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
              var interceptor = ['$location', '$rootScope', '$q', function($location, $rootScope, $q) {
                  function success(response) {
                      return response
                  };
  
                  function error(response) {
                      if (response.status == 401) {
                          $rootScope.$broadcast('event:unauthorized');
                          $location.path('/users/login');
                          return response;
                      };
                      return $q.reject(response);
                  };
  
                  return function(promise) {
                      return promise.then(success, error);
                  };
              }];
  
  //            $httpProvider.responseInterceptors.push(interceptor);
              $httpProvider.interceptors.push(interceptor);
          }])
          .config(['$routeProvider',function($routeProvider, $locationProvider){
              $routeProvider
                      .when('/',               {controller: 'HomeCtrl',    templateUrl: '&lt;%= asset_path('templates/index.html') %&gt;'})
                      .when('/record',         {controller: 'RecordCtrl',  templateUrl: '&lt;%= asset_path('templates/record/index.html') %&gt;'})
                      .when('/users/login',    {controller: 'UsersCtrl',   templateUrl: '&lt;%= asset_path('templates/users/login.html') %&gt;'})
                      .when('/users/register', {controller: 'UsersCtrl',   templateUrl: '&lt;%= asset_path('templates/users/register.html') %&gt;'})
                      .otherwise(              {redirectTo: '/'});
          }]);
  </code></pre>
  
  <p>Now when I run project and I want accept <code>localhost:3000/#/record</code>, I see the record page without data and page doesn't redirect to login page. How can I fix this probelm and solve it?</p>