Untitled

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="App">
    <h1>Broadcast AngularJS port</h1>
    <div ng-controller="parent">
      this is parent controller. <button id="action" ng-click="action()">action</button>
      <div ng-repeat="item in items" ng-controller="child">
        <h3>child controller {{$index}}</h3>
      </div>
    </div>
    <script src="https://rawgit.com/bahmutov/console-log-div/master/console-log-div.js"></script>
  </body>

</html>

var randomMillis = function() {
	return Math.floor(Math.random() * 5000);
}
angular.module('App', [])
  .controller('parent', function ($scope) {
    $scope.items = ['one', 'two', 'three'];
    $scope.action = function action() {
      $scope.$broadcast('action');
      console.log('parent sent action broadcast');
    };
  })
  .controller('child', function ($scope, $timeout) {
    $scope.$on('action', function childAction() {
      var ms = randomMillis();
      console.log('starting action in child for', ms, 'ms');
      $timeout(function () {
        console.log('action completed after', ms, 'ms');
      }, ms);
    });
  });

/* Styles go here */