Mediator/Chain of responsibility

<!doctype html>
<html ng-app="mediatorDemo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

    <div ng-controller="UserProfileCtrl" class="container">
      <h1 ng-show="user.status === 'new'">Complete your registration!</h1>
      <h1 ng-show="user.status === 'finished'">Congrats!</h1>
      <h1 ng-show="user.status === 'incomplete'">Registration incomplete!</h1>
      <hr />
      <div ng-show="user.status !== 'finished'">
        Hi {{user.firstName}},
        <button class="btn btn-default" ng-click="begin()">Continue</button>
      </div>

      <div ng-show="user.status === 'finished'">
          <h2>Completed profile</h2>
          <hr />
          <ul>
            <li ng-show="user.firstName">Firstname: {{user.firstName}}</li>
            <li ng-show="user.lastName">Lastname: {{user.lastName}}</li>
            <li ng-show="user.phone">Phone: {{user.phone}}</li>
            <li ng-show="user.email">Email: {{user.email}}</li>
          </ul>
      </div>

    </div>
  </body>
</html>

angular.module('mediatorDemo', ['ui.bootstrap']);

angular.module('mediatorDemo').controller('UserProfileCtrl', function ($scope, $log, ModalWorkFlow) {

  // Bob hasnt fully registered yet
  $scope.user = {
    firstName: 'Bob',
    lastName: '',
    phone: '',
    email: '',
    status: 'new'
  };

  // kick off the registration presentation
  $scope.begin = function (user) {
    ModalWorkFlow.beginPresentation(angular.copy($scope.user));
  };

  // act on cancel event triggered by ModalWorkFlow
  $scope.$on('modalPresentation.canceled', function () {
    $scope.user.status = 'incomplete';
  });

  // act on finish event triggered by ModalWorkFlow
  var disconnect = $scope.$on('modalPresentation.finished', function (evt, user) {
    angular.extend($scope.user, user);
    $scope.user.status = 'finished';
    // disconnect the listener
    disconnect();
  });

});

angular.module('mediatorDemo').factory('ModalWorkFlow', function ($modal, $rootScope) {

  function beginPresentation (user) {
    openUserModal.call(user);
  }

  function openUserModal () {
    handler('userModalContent.html', this, openInfoModal);
  }

  function openInfoModal () {
    handler('infoModalContent.html', this, openReviewModal);
  }

  function openReviewModal () {
    handler('reviewModalContent.html', this);
  }

  // modal constructor, and close listener
  // responsible for displaying the modal and
  // either calling the next modal
  // or publishing the new user to subscribers
  function handler (templateUrl, user, nextModalOpenFn) {
    var modal = $modal.open({
      templateUrl: templateUrl,
      controller: 'UserModalCtrl',
      // resolve will inject user into our controller as a dependency called 'user'
      resolve: {
        user: function () {
          return user;
        }
      }
    });

    // modal.result is a promise that is resolved
    // when $modalInstance in the modal controller calls close or dismiss
    modal.result.then(
      // success callback
      function close(user) {
        if (nextModalOpenFn) {
          nextModalOpenFn.call(user);
        }
        else {
          $rootScope.$broadcast('modalPresentation.finished', user)
        }
      },
      // fail callback
      function dismiss() {
        $rootScope.$broadcast('modalPresentation.canceled')
      }
    );
  }

  // public interface
  return {
    beginPresentation: beginPresentation
  }

});

angular.module('mediatorDemo').controller('UserModalCtrl', function ($scope, $modalInstance, user) {

  $scope.user = user;

  $scope.ok = function () {
    $modalInstance.close($scope.user);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };

});

<div class="modal-header">
    <h3 class="modal-title">Additional info</h3>
</div>
<div class="modal-body">
    Tel: <input ng-model="user.phone" type="phone">
    Email: <input ng-model="user.email" type="text">
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">Next</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

<div class="modal-header">
    <h3 class="modal-title">Review</h3>
</div>
<div class="modal-body">
    <ul>
        <li>First: {{user.firstName}}</li>
        <li>Last: {{user.lastName}}</li>
        <li>Phone: {{user.phone}}</li>
        <li>Email: {{user.email}}</li>
    </ul>
    Agree to Terms: <input ng-model="agree" type="checkbox">
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()" ng-disabled="!agree">Done</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

<div class="modal-header">
  <h3 class="modal-title">Basic info</h3>
</div>
<div class="modal-body">
  First:
  <input ng-model="user.firstName" type="text">
  Last:
  <input ng-model="user.lastName" type="text">
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="ok()">Next</button>
  <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>