JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="AppCtrl1 as ctrl">
    <div><button ng-click="ctrl.submit()">Update</button></div>
    <h3>App Controller 1</h3>
    <div class="item" ng-repeat="r in ctrl.results.items">{{ r }}</div>
</div>

<div ng-controller="AppCtrl2 as ctrl">
    <h3>App Controller 2</h3>
    <div class="item" ng-repeat="r in ctrl.items">{{ r }}</div>
</div>

<test-directive></test-directive>

CSS

.item { display: inline-block; padding: 0 0.5em }

JavaScript

var app = angular.module('myapp',[]);

app.factory('AppService', function() {
    var service = {};
    
    service.resultSet = {};
    
    service.updateResults = function() {
        console.log('updating results');
        // if you update an existing object, then expressions bound to the properties of this object will simply change
        var rnd = Math.floor(Math.random() * (25 - 1)) + 1;
        service.resultSet.lastUpdate = Date.now();
        service.resultSet.items = [];
        for (var i=0; i < rnd;i++) {
            service.resultSet.items.push(i);
        }
    }
    
    return service;
});

app.controller('AppCtrl1', function(AppService) {
    var ctrl = this;
   
    ctrl.results = AppService.resultSet;
    
    ctrl.submit = function() {
        AppService.updateResults();
    }
});

app.controller('AppCtrl2', function(AppService,$scope) {
    var ctrl = this;
    
    // if, instead you want to bind directly to the array, you'll have to watch it to see changes.
    $scope.$watch(
        function() { return AppService.resultSet.items; }, 
        function(newVal, oldVal) {
            ctrl.items = newVal;
        }
    );
              
});

app.directive('testDirective', function(AppService) {
    return {
        restrict: 'E',
        replace: true,
        link: function(scope) {
            // same thing in directives, expose the object in your link scope and then bindings will update automatically
            scope.results = AppService.resultSet;
        },
        template: '<div><h3>Directive</h3><div class="item" ng-repeat="r in results.items">{{ r }}</div></div>'
    }
});

angular.bootstrap(document,['myapp']);