JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<div ng-app="theApp">
  <div ng-controller="someController">
    <div ng-repeat="note in notes"><span ng-click="selectNote(note)">{{ note.title }}</span>
    </div>
    <div ng-controller="otherController">
      <div>{{ currentNote }}

      </div>
    </div>
  </div>
</div>

CSS

span {
  display: block;
  border: 2px solid gray;
  padding: 2rem;
}

JavaScript

angular.module('theApp', [])
  .controller('someController', ['$scope', 'someService', function($scope, someService) {
    $scope.notes = [{
      title: 'note1'
    }, {
      title: 'note2'
    }];

    $scope.selectNote = function(note) {
      console.log('selected the note');
      someService.setCurrentNote(note);
    };
  }])
  .controller('otherController', ['$scope', 'someService', function($scope, someService) {
    $scope.$on('noteChanged', function() {
      console.log('note changed in otherController');
      $scope.currentNote = someService.note;
    });
  }])
  .service('someService', ['$rootScope', loadSomeService]);

function loadSomeService($rootScope) {
  var service = {};
  service.note = null;

  service.setCurrentNote = function(note) {
    console.log('current note set');
    this.note = note;
    console.log(this);
    $rootScope.$broadcast('noteChanged');
  };
  return service;
}