Q:

How do i can show form data after submit on other page using isolated scope directive?

I am new to angularjs,i make a sample app ,now i want to display data on next page when form is submitted using isolated scope directive .
my index.html:
 <body ng-controller="mainController">
 <nav class="navbar navbar-default">
  <div class="container">
   <div class="navbar-header">
     <a class="navbar-brand" href="/">Angular Routing Example</a>
  </div>
   <ul class="nav navbar-nav navbar-right">
      <li><a href="#home"><i class="fa fa-home"></i> Home</a></li>
      <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
      <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a>    </li>
   </ul>
  </div>
   </nav>
 <div id="main">
    <!-- angular templating -->
    <!-- this is where content will be injected -->
   <div ui-view></div>
</div>
</body>

Directive:
  var scotchApp = angular.module('scotchApp');

  scotchApp.directive('homeData', function() {
   return {
      scope: {
             info: '=fo'
             },
      templateUrl: 'homeDirective.html'
          }

 scotchApp.controller('MyFormCtrl', [function() {

      this.user = {
                  name: '',
                  email: ''
                 };

      this.register = function() {
          // console.log('User clicked register', this.user);
           alert(this.user.name + "-- " + this.user.email);
          $scope.name = this.user.name;
       };
     }]);
   })

how can i make possible this when someone submit the form the about page is displayed after clicking submit button and all form data i want to display there.
here is my plunker: http://plnkr.co/edit/D5S2c6rgycWFfsyfhN9J?p=preview

A:

So based off of what you put into plunker and looking at your code I noticed a few issues.
First: You had your controller inside your directive causing none of the code within the directive to be run.
Your Code
       var scotchApp = angular.module('scotchApp');
       scotchApp.directive('homeData', function() {
       return {
            scope:{
              info:'=fo'
            },
         templateUrl: 'homeDirective.html'
        }
         scotchApp.controller('MyFormCtrl', [function() {

          this.user = {
                name: '',
              email: ''
            };

          this.register = function() {
          // console.log('User clicked register', this.user);
              alert(this.user.name+ "-- " +this.user.email);
          $scope.name=this.user.name;
          };
          }]);
       })

Update Code:
var scotchApp = angular.module('scotchApp');
       scotchApp.directive('homeData', function() {
       return {
            scope:{
              info:'=fo'
            },
         templateUrl: 'homeDirective.html'
        };

          });
          scotchApp.controller('MyFormCtrl', [function() {

          this.user = {
                name: '',
              email: ''
            };

          this.register = function() {
          // console.log('User clicked register', this.user);
              alert(this.user.name+ "-- " +this.user.email);
          $scope.name=this.user.name;
          };
          }]);

Second: You need to add some way allowing your variables to talk between controllers. I used a service and passed it into both controllers
homeDirective.js
scotchApp.controller('MyFormCtrl', ['$scope', 'userService', function($scope, userService) {
         $scope.userService = userService;
          $scope.user = {
                name: '',
              email: ''
            };

          $scope.register = function() {
              //sets the variables within the service
              $scope.userService.setUserName($scope.user.name);
              $scope.userService.setUserEmail($scope.user.email);
              alert($scope.userService.getUserName() + "-- " + $scope.userService.getUserEmail());
          };
          }]);
          //Service to be passes to the controllers
          scotchApp.service('userService', function(){
            var userService = {
              user: {
                'name': '',
                'email': ''
              },
              getUser: function(){
                return userService.user;
              },
              getUserName: function(){
                return userService.user.name;
              },
              getUserEmail: function(){
                return userService.user.email;
              },
              setUserName: function(name){
                userService.user.name = name;
              },
              setUserEmail: function(email){
                userService.user.email = email;
              },
            };
            return userService;

          });

script.js
scotchApp.controller('aboutController', ['$scope', 'userService', function($scope, userService) { 
               $scope.userService = userService;
               $scope.user = $scope.userService.user; 
               $scope.message = 'Look! I am an about page.'; 
           }]); 

Third: Your HTML page had to be able to call the register function and move over to the about page. 
homeDirective.html
<div class="jumbotron text-center" >
  <h1>Home Page</h1>
  <p>{{ message }}</p>
  <form name="myForm" ng-controller="MyFormCtrl as ctrl">
    Name: <input type="text" class="form-control" ng-model="user.name">
    Email: <input type="email" class="form-control" ng-model="user.email">
    <br/>
    <a type="submit" ng-href="#about">
      <button ng-click="register();" type="submit">Register</button>
    </a>
  </form>
</div>

Last: You should put your whole angular app in a self calling function like so
(function(){
     var app = angular.module('app'[]);
     //more code
})();

Here is the link to the plunk fork that I did for your code. Hopefully that all made sense.Link to Plunker
Good Luck!

