JSFiddle - React, Tailwind, and code Playground

by gkucmierz

HTML

<div ng-app="parent">
    <div ng-controller="ParentController">
        Parent log:
        <ul>
            <li ng-repeat=" log in logs ">{{ log.desc }}</li>
        </ul>
    </div>
    
    <div ng-controller="ChildController">
        Child log:
        <ul>
            <li ng-repeat=" log in logs ">{{ log.desc }}</li>
        </ul>
    </div>
</div>

JavaScript

angular.module('parent', ['child']);
angular.module('child', []);


angular.module('child')

.service('ChildService', function() {
    this.desc = 'I am from child service';
})

.service('BothService', function() {
    this.desc = 'I am from child service';
})

.controller('ChildController', function($scope, ChildService, BothService, ParentService) {
    $scope.logs = [];
    $scope.logs.push({desc: 'parent: ' + ParentService.desc });
    $scope.logs.push({desc: 'child: ' + ChildService.desc });    
    $scope.logs.push({desc: 'both: ' + BothService.desc });
});


angular.module('parent')

.service('ParentService', function() {
    this.desc = 'I am from parent service';
})

.service('BothService', function() {
    this.desc = 'I am from parent service';
})

.controller('ParentController', function($scope, ChildService, ParentService, BothService) {
    $scope.logs = [];
    $scope.logs.push({desc: 'parent: ' + ParentService.desc });
    $scope.logs.push({desc: 'child: ' + ChildService.desc });    
    $scope.logs.push({desc: 'both: ' + BothService.desc });

});