JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div ng-app='app' ng-controller='ctl as c'>
  <ul>
    <li ng-repeat='item in c.fruits'>
      <div>
        {{item.name}}
      </div>
      <div>
        {{item.basket().name}}
      </div>
    </li>
  </ul>
  <ul>
    <li ng-repeat='item in c.baskets'>
      <div>
        {{item.name}}
      </div>
      <div ng-repeat='fruit in item.fruits()'>
        <div>
          {{fruit.name}}
        </div>
      </div>
    </li>
  </ul>
</div>

JavaScript

angular.module('app', [])
.service('fruit', fruit)
.service('basket', basket)
.controller('ctl', ctl);

fruit.$inject = ['$injector'];
function fruit($injector) {
	var self = this;
  self.getByIdList = getByIdList;
  self.getAll = getAll;
  
  function getBasketService(){
	  return $injector.get('basket'); 
  }
  function getAll() {
  	return data;
  }
  function getByIdList(list) {
  	var length = list.length;
    var returnData = [];
    for(var i = 0; i < length; i++) {
    	returnData.push(data[list[i]]);
    }
    return returnData;
  }
  var data = [
  	{
    	id: 0,
      name: 'apple',
      basket: function() { return getBasketService().getById(this.refs.basket); },
      refs: {
      	basket: 0
      }
    },
    {
    	id: 1,
      name: 'orange',
      basket: function() { return getBasketService().getById(this.refs.basket); },
      refs: {
      	basket: 1
      }
    },
    {
    	id: 2,
      name: 'pear',
      basket: function() { return getBasketService().getById(this.refs.basket); },
      refs: {
      	basket: 2
      }
    }
  ];
}

basket.$inject = ['$injector'];
function basket($injector) {
	var self = this;
  self.getById = getById;
  self.getAll = getAll;
  function getFruitService(){
      return $injector.get('fruit');
  }
  
  function getAll() {
  	return data;
  }
  function getById(id) {
  return data[id];
  }
  var data = [
  	{
    	id: 0,
      name: 'basket 1',
      fruits: function() { return getFruitService().getByIdList(this.refs.fruits); },
      refs: {
      	fruits: [0,1]
      }
    },
    {
    	id: 1,
      name: 'basket 2',
      fruits: function() { return getFruitService().getByIdList(this.refs.fruits); },
      refs: {
      	fruits: [0]
      }
    },
    {
    	id: 2,
      name: 'basket 3',
      fruits: function() { return getFruitService().getByIdList(this.refs.fruits); },
      refs: {
      	fruits: [1,2]
      }
    }
  ];
}

ctl.$inject = ['fruit', 'basket'];
function ctl(fruit, basket) {
	var self =...