JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div data-ng-app="app">
  <div data-ng-controller="Controller_1 as ctrl_1">
    <div>controller value: {{ ctrl_1.list }}</div>
    <list data-items="ctrl_1.list" data-on-update="ctrl_1.updateList(newValue)"></list>
  </div>

  <div data-ng-controller="Controller_2 as ctrl_2">
    <div>controller value: {{ ctrl_2.list }}</div>
    <list data-items="ctrl_2.list" data-on-update="ctrl_2.updateList(newValue)"></list>
  </div>
</div>

JavaScript

/**
 * List module - the one responsible for displaying lists and modifying them
 */
var list = angular.module('listModule', []);

list.controller('listCtrl', function() {
  this.reverse = function() {
  	this.items = [].concat(this.items).reverse();
    this.onUpdate({ newValue: this.items });
  }
});

list.component('list', {
  bindings: {
    items: '<',
    onUpdate: '&'
  },
  controller: 'listCtrl',
  template: '<button ng-click="$ctrl.reverse()">Revert</button><ul><li ng-repeat="item in $ctrl.items">{{ item }}</li></ul>'
});

/** 
 * App - depends on listModule
 */
var app = angular.module('app', ['listModule']);

app.controller('Controller_1', function() {
  this.list = [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 0
  ];

  this.updateList = function(list) {
    this.list = list;
  };
});

app.controller('Controller_2', function() {
  this.list = [
    'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'
  ];

  this.updateList = function(list) {
    this.list = list;
  };
});