I am trying to understand data binding in Angularjs.

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.

For example, This is first.html:

<div ng-controller="MyCtrl">
  <input type="text" ng-model="value"/><br>

   {{value}}

<a href="#/second"><input type="submit" value="Second page"/></a>
</div>

and say second.html has only this piece of code {{value}}.

and in the .js file we have $routeProvider which takes the template url as 'second.html' & the controller is 'MyCtrl'.

So the controller is:

MyApp.controller(function($scope){

 $scope.value="somevalue";

 })

By doing the above way the {{value}} on the second.html is getting the value "somevalue". Which is ming from the controller.

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.

My question is how do I bind the value on second.html with first.html automatically.

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.

I am trying to understand data binding in Angularjs.

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.

For example, This is first.html:

<div ng-controller="MyCtrl">
  <input type="text" ng-model="value"/><br>

   {{value}}

<a href="#/second"><input type="submit" value="Second page"/></a>
</div>

and say second.html has only this piece of code {{value}}.

and in the .js file we have $routeProvider which takes the template url as 'second.html' & the controller is 'MyCtrl'.

So the controller is:

MyApp.controller(function($scope){

 $scope.value="somevalue";

 })

By doing the above way the {{value}} on the second.html is getting the value "somevalue". Which is ming from the controller.

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.

My question is how do I bind the value on second.html with first.html automatically.

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.

• javascript
• angularjs

• Please provide Plunker or jsFiddle link. – Stewie Commented Feb 27, 2013 at 22:20

4 Answers 4

Use a service and store your model there. Gloopy already has a good example of this here: https://stackoverflow./a/12009408/215945
Be sure to use an object property instead of a primitive type.

If you'd rather use $rootScope, then as above, define an object, rather than a primitive:

$rootScope.obj = { prop1: "somevalue" }`

then bind to that object property in your views:

<input type="text" ng-model="obj.prop1">
{{obj.prop1}}

If you attach your data to $rootScope if will survive transitions across controllers and be part of all $scopes (prototype inheritance magic)

//**attach in controller1:**
function MyCtrl1($rootScope) {
    $rootScope.recs= { rec1 : "think philosophically" };
}

//**do nothing in controller for view2:**
function MyCtrl2($scope) {
  //nothing
}

//**Markup for view2: automaticall makes use of data in $routeScope**
<p>Try doing this: {{recs.rec1 }}</p>

//**markup for view1 to respond to OPs question in ments**:
<input ng-model="recs.rec1" />

Update: Creating a custom service is a more scalable and structurally sound way to handle this, but the $rootScope method is the quick and dirty way.

Update2: added view1 markup to respond to OP question, edited example to take advantage of correct advice to use object rather than primitive.

Found the Solution to what I was looking for, The solution is in the Angular docs, here is the link http://docs.angularjs/cookbook/deeplinking.

Some part of the example on that link answers my question.

You should user $broadcast, $emit or scope munication. Try to avoid overloading the rootScope. It is as a bad practice as saving data into the application sessions.