JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div ng-app='app' ng-controller='ctl as c'>
  <div ng-repeat='ob in c.models'>
    <div>
      {{ob.name}}
    </div>
    <div ng-repeat='ref in ob.references()'>
      {{ref.name}}
    </div>
  </div>
</div>

JavaScript

angular.module('app', [])
.controller('ctl', ctl)
.service('srv', srv)
.service('srv2', srv2);

ctl.$inject = ['srv', 'srv2'];
function ctl(srv, srv2) {
	var self = this;
	self.models = srv.getAll();
  setupModels();
  
  function setupModels() {
  	var length = self.models.length;
    for(var i = 0; i < length; i++) {
    	var modob = self.models[i];
      if(typeof modob.references === 'undefined') {
      	modob.references = getByIdList(modob.refs.list);
      }
    }
  }
  function getByIdList(item) {
  	return function() {
    	return srv2.getByIdList(item);
    }
  }
}


function srv2() {
	var self = this;
  self.getByIdList = function (idlist) {
  	var data = [];
  	var length = idlist.length;
    var modLength = model.length;
    for(var i = 0; i < length; i++) {
    	var id = idlist[i];
      for(var j = 0; j < modLength; j++) {
      	var mod = model[j];
        if(mod.id === id) {
        	data.push(mod);
        }
      }
    }
    return data;
  }
	var model = [
  	{id: 0, name: 'reference 1'},
    {id: 1, name: 'reference 2'},
    {id: 2, name: 'reference 3'}
  ];
}


function srv() {
	var self = this;
  self.getAll = function() {
  	return model;
  };
  
	var model = [
  	{id: 0, name: 'one', refs: {list: [0, 1, 2]}},
    {id: 1, name: 'two', refs: {list: [1, 2]}},
    {id: 2, name: 'three', refs: {list: [2]}}
  ];
}