JSFiddle - React, Tailwind, and code Playground

by st3fan

HTML

<div ng-app="demoApp">

    <div ng-controller="ItemListCtrl">

        <h1>{{heading}}</h1>
        <ul ng-repeat="item in items">
            <li>{{item.name}}</li>
        </ul>

    </div>
    
    <div ng-controller="BroadcastCtrl">
        <button ng-click="broadcastClick()">Broadcast</button>
    </div>
</div>

JavaScript

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

demoApp.controller('ItemListCtrl', function ($scope) {
    $scope.items = [
        { 'name': 'Nexus S' },
        { 'name': 'iPhone 5S' }
    ];
    
    $scope.$on('UpdateItems', function(event, args) {
        console.log(event.name, arguments); // DEBUG
        $scope.items.push({ 'name': ('Item ' + $scope.items.length + 1) });
    });
});

demoApp.controller('BroadcastCtrl', function ($scope, $rootScope) {

    $scope.broadcastClick = function() {
        console.log('broadcastClick', arguments); // DEBUG
        $rootScope.$broadcast('UpdateItems');
    };

});