title: Data Binding between pages in Angularjs
body: <p>I am trying to understand data binding in Angularjs.</p>
  
  <p>What I want to do is establish binding between pages that is if I change the input on first.html, the data should automatically change in second.html.</p>
  
  <p>For example, 
  This is first.html:</p>
  
  <pre><code>&lt;div ng-controller="MyCtrl"&gt;
    &lt;input type="text" ng-model="value"/&gt;&lt;br&gt;
  
     {{value}}
  
  &lt;a href="#/second"&gt;&lt;input type="submit" value="Second page"/&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and say second.html has only this piece of code {{value}}.</p>
  
  <p>and in the .js file we have $routeProvider which takes the template url as 'second.html' &amp; the controller is 'MyCtrl'.</p>
  
  <p>So the controller is:</p>
  
  <pre><code>MyApp.controller(function($scope){
  
   $scope.value="somevalue";
  
   })
  </code></pre>
  
  <p>By doing the above way the {{value}} on the second.html is getting the value "somevalue". Which is comming from the controller.</p>
  
  <p>But if I change the input value dynamically that is on the first.html, the value on the second.html is not getting that value.</p>
  
  <p>My question is how do I bind the value on second.html with first.html automatically.</p>
  
  <p>To understand the question clearly, Suppose there is an input field for entering text and a submit button on first.html, then I want to get the Input value of the text field of the first.html on the second.html page on Submit.</p>