title: angular circular dependency work-around
body: <p>fiddle: <a href="https://jsfiddle.net/ahmadabdul3/L3eeeh6n/" rel="nofollow">https://jsfiddle.net/ahmadabdul3/L3eeeh6n/</a></p>
  
  <p>I'm building an app. This app starts with some static data that I can add to, remove from. The problem I'm having (circular dependency) comes from this initial static data. Here's the scenario:</p>
  
  <p>I have 2 services (fruit, basket). Each fruit can belong to only 1 basket, but each basket can hold many fruits. These two services (below) depend on each other:</p>
  
  <pre><code>function fruitService() {}
  function basketService() {}
  </code></pre>
  
  <p>the reason they depend on each other is because of the initial static data that I have:</p>
  
  <pre><code>function fruitService(basketService) {
    var data = [
     {
       id: 0,
       name: 'apple',
       basket: function() { return basketService.getById(this.refs.basket); },
       refs: {
         basket: 0
       }
     }
    ];
  }
  </code></pre>
  
  <p>as you can see, I have a function <code>basket</code> that returns a basket item, so that I can dynamically retrieve basket objects from fruit objects.</p>
  
  <p>the basket service is similar:</p>
  
  <pre><code>function basketService(fruitService) {
    var data = [
     {
       id: 0,
       name: 'basket1',
       fruits: function() { return fruitService.getByIdList(this.refs.fruits); },
       refs: {
         fruits: [0, ...]
       }
     }
    ];
  }
  </code></pre>
  
  <p>same as the fruitService, I have a <code>fruits</code> function that can give me fruit objects when I ask for them. I've tried different combinations of ways to try to break apart the actual static data and the service to overcome this circular dependency, but its not happening. </p>
  
  <p>how can I architect this without having this circular dependency </p>