JSFiddle - React, Tailwind, and code Playground

by davorpeic

HTML

<script src="http://code.angularjs.org/angular-1.0.0.js"></script>
    <div ng-controller="ControllerA">
      <ul>
        <li ng-repeat="item in list">{{item}}</li>
      </ul>
      <input type="text" ng-model="newItem" /><input type="submit" ng-click="addItem()" />
    </div>

    <div ng-controller="ControllerA">
      <ul>
        <li ng-repeat="item in list">{{item}}</li>
      </ul>
    </div>

JavaScript

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

angular
 .module( 'myApp', [] )
 .service( 'MenuService', [ '$rootScope', function( $rootScope ) {
   return {
      menu: [ 'Item 1' ],
      add: function( item ) {
        this.menu.push( item );
        $rootScope.$broadcast( 'MenuService.update', this.menu );
      }
   };
 }])
 .controller( 'ControllerA', [ 'MenuService', '$scope', function( MenuService, $scope ) {
   $scope.menu = MenuService.menu;
   
   $scope.addItem = function() {
    MenuService.add( $scope.newItem );  
   };
   
   $scope.$on( 'MenuService.update', function( event, menu ) {
     $scope.menu = menu;
   });
 }]);