document.ready called in infinite loop with angular.js


I am building an app using Angular.js, Node.js, and (among other things). My issue is that when I try to follow a link routing me to a login page, I end up in an infinite loop. The jquery document.ready function is called over and over, and each time this happens another socket connects to the user. The page won't even load because this keeps getting called. I am really stuck, so any help would be greatly appreciated.

Here is the configuration for the client side routing: = angular.module('MEAN', ['ngCookies', 'ngResource']);['$routeProvider', function($routeProvider) {
    when('/', { templateUrl: 'views/index.html' }).
    when('/signin', {
        templateUrl: '/partials/signin',
        controller: SigninCtrl
    when('/signup', {
        templateUrl: '/partials/signup',
        controller: SignupCtrl
    otherwise({redirectTo: '/'});

//Removing tomcat unspported headers['$httpProvider', function($httpProvider, Configuration) {
    //delete $httpProvider.defaults.headers.common["X-Requested-With"];

//Setting HTML5 Location Mode['$locationProvider', function($locationProvider) {

Here is the controller:

function SigninCtrl($scope, $http, $location) {
$scope.form = {};
  $scope.title = "Sign In";
  $scope.SignIn = function() {
    $'/users/session', $scope.form).
        console.log("Successful sign in", data);
    .error(function (data) {
        console.log("There was an error");
        $scope.errors = data.errors;

And here are the jade templates I am using for the partials:

extends ../layouts/default

block content
      if (typeof errors !== 'undefined')
          a.close(data-dismiss="alert", href="javascript:void(0)") x
            each error in errors
              li= error.type

      block auth
extends auth

block auth
      label.control-label(for='email') Email
        input#email(type='text', name="email", placeholder='Email')

      label.control-label(for='password') Password
        input#password(type='password', name="password", placeholder='Password')

      button(ng-click='SignIn()') Sign in
      | or"/signup") Sign up

And here is the document ready function:

window.bootstrap = function () {
    angular.bootstrap(document, ['MEAN']);
window.init = function () {

window.connectSocket = function(){
  var socket = io.connect();
  socket.on('connect', function(message){
    console.log("socket connected");

$(document).ready(function () {
    //Fixing facebook bug with redirect
  console.log("Document ready!");
    if (window.location.hash == "#_=_") window.location.hash = "";


I feel dumb, but I figured out the issue. Similar to this issue: What web server configuration is required to make AngularJS routing function correctly?

I actually moved the routing from the server to the client earlier and in the partial template I had include auth and in the auth file I had an include for the header template, something that angular did already. In the end it was trying to include the same header in a loop... Hope this might help someone with the same issue later. Just make sure you don't have the header included multiple times...

This video can help you solving your question :)
By: admin