AngularJS Circular Dependency

Demo of a circular dependency error in AngularJS

by Alexandre Simoes

HTML

<div ng-app="app">
  <div ng-controller="main as mc">
    <h1 ng-bind="mc.header"></h1>
  </div>
</div>

JavaScript

angular.module('app', [])

.controller('main', function(f1) {
    var vm = this;

    vm.header = 'Demo';

  })
  .factory('f1', function(f2) {
    // I reference f2
    return {};
  })
  .factory('f2', function(f3) {
    // I'm being referenced by f1 and reference f3
    return {};
  })
  .factory('f3', function(f1) {
    // I'm being referenced by f2, 
    //	which is being referenced by f1
    //	and I'm referencing f1 again, creating a circular dependency
    //		f1 <- f3 <- f2 <- f1
    return {};
  })