Communication between two angular.js apps.

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

app1.controller('App1Controller', function($scope) {
    
    // use this function to send a value to app2
    var sendText = function(newText) {
        console.log('newtext', {'filter':newText})
        angular.element(document.getElementById('app2')).scope().$emit('search.update', newText);
    };
    
    $scope.$watch('text', function(newText) {
        sendText(newText);
    });
    
    // initial value
    $scope.text = "Some text";
});

/*
 
 The code above and below do not share any module, service, etc.
 
*/


var app2 = angular.module('App2', []);
app2.controller('App2Controller', function($scope) {
    $scope.items = [
      "Cesar", "Izaak", "Erika"
    ];
    $scope.$on('search.update', function(event, filter){
      console.log('filter:', filter)
      $scope.itemFilter = filter
      console.log('itemFilter:', $scope.itemFilter)
    });
    // this function will be called from app1 when text changes
    $scope.setText = function(newText){
        $scope.$apply(function() {
            $scope.text = newText;
        });
    };
    
});

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Communication between two angular.js apps</title>
    <!-- <script>document.write('<base href="' + document.location + '" />');</script> -->
</head>
<body>
    <div id="app1" ng-controller="App1Controller">
        <h2>App1</h2>
        <input type="text" ng-model="text">
    </div>
    
    <!-- two separate apps -->
    
    <div id="app2" ng-controller="App2Controller">
        <h2>App2</h2>
        filter: <input type="text" ng-model="itemFilter">
        <ul>
          <li ng-repeat="item in items | filter: itemFilter">{{item}}</li>
        </ul>
      itemfilter: {{itemFilter}}
    </div>
    <script src="http://code.angularjs.org/1.1.3/angular.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
    <script type="text/javascript">
        // bootstrap both apps
        angular.bootstrap(document.getElementById('app2'), ['App2']);
        angular.bootstrap(document.getElementById('app1'), ['App1']);
        
    </script>
</body>
</html>