Screen transition Sample 02

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.2.18" data-semver="1.2.18" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
    <script data-require="angular-route@1.2.18" data-semver="1.2.18" src="http://code.angularjs.org/1.2.18/angular-route.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="appName" ng-controller="MainController">
    <h1>Screen transition Sample 02</h1>
    <div>
      <p>
        <a href="#/fromView/">fromView</a> |
        <a href="#/toView/">toView</a>
      </p>
    </div>
    <div ng-view></div>
  </body>

</html>

(function () {
    angular.module('appName', ['ngRoute'], function($routeProvider) {
        $routeProvider
        .when('/fromView/', { controller: 'FromViewController', templateUrl: 'FromView.html' })
        .when('/toView/'  , { controller: 'ToViewController',   templateUrl: 'ToView.html'   });
    });
    angular.module('appName').controller('MainController', function($scope, $interval) {
        var hogeChangeWatcher = $scope.$on('hogeChange', function(event, args) {
            var stop = $interval(
                function() {
                    $interval.cancel(stop);
                    $scope.$broadcast('fugaChange', args);
                }, 500
            );
        });
        var destroyWatcher =  $scope.$on('$destroy', function() {
            hogeChangeWatcher();
            destroyWatcher();
        });
    });
    angular.module('appName').controller('FromViewController', function($scope, $location) {
        $scope.buttonClick = function() {
            $scope.$emit('hogeChange', [Math.random()]);
            $location.path( '/toView/');
        };
    });
    angular.module('appName').controller('ToViewController', function($scope) {
        var fugaChangeWatcher = $scope.$on('fugaChange', function(event, args) {
            $scope.fromViewValue = args[0];
        });
        var destroyWatcher =  $scope.$on('$destroy', function() {
            fugaChangeWatcher();
            destroyWatcher();
        });
    });
}());

<div>
<h2>From View</h2>
<button ng-click="buttonClick()">Go ToView</button>
</div>

<div>
<h2>To View</h2>
<p>{{fromViewValue}}</p>
</div>