Pass data from angular form to another controller
<p>I am new to angularjs. I want to pass data from html form to another route.</p>

<p>Here is the part of <strong>index.html</strong></p>

<pre><code>&lt;div ng-app="myApp" ng-controller="HomeController"&gt;
    &lt;div class="container"&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-md-12"&gt;
                &lt;div ng-view=""&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here are the routes</p>

<pre><code>var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', function ($routeProvider) {
   $routeProvider.when('/', {
   templateUrl: 'views/home.html',
   controller: 'HomeController'
});
$routeProvider.when('/about', {
  templateUrl: 'views/about.html',
  controller: 'AboutController'
});
}]);
</code></pre>

<p>When the route  is <strong>/</strong> it hits the <strong>views/home.html</strong> in which it has a form</p>

<pre><code>&lt;form action="#/about" ng-submit="submitData()"&gt;
    &lt;input type="text" name="address" ng-model="user.address" /&gt;
    &lt;input type="submit" /&gt;
&lt;/form&gt;
</code></pre>

<p>I have a <strong>user</strong> service whose implementation is</p>

<pre><code>myApp.factory("user", function () {
     return {};
});
</code></pre>

<p>I inject <strong>user</strong> service in <strong>HomeController</strong> like </p>

<pre><code> myApp.controller("HomeController", function ($scope, user) {
          $scope.user = user;
          // and then set values on the object

          // $scope.user.address = "1, Mars";    // when uncomment this line it can be accessed on AboutController? Why? Otherwise I cannot access user.address
          console.log($scope.user);
  });
</code></pre>

<p>Don note my comment in above code..</p>

<p>and passes <strong>user</strong> to AboutController like</p>

<pre><code>myApp.controller("AboutController", function ($scope, user) {
    $scope.user = user;
    // and then set values on the object
    $scope.user.firstname = "John";
    $scope.user.secondname = "Smith";
    console.log($scope.user);
});
</code></pre>

<p>Here is the <strong>about.html</strong></p>

<pre><code>&lt;p&gt;
    {{ user.address }}
&lt;/p&gt;
</code></pre>

<p><strong>Problem:</strong> {{user.address}} doesn't work on <strong>AboutController</strong>. I can't see any output... But when i remove the comment from above code.. It only displays hardcoded values in the controller What am I missing?</p>

<p>This is the working demo <a href="http://ashoo.com.au/angular/" rel="nofollow noreferrer">http://ashoo.com.au/angular/#/</a></p>