AngularJs - model value does not reflect on ui in nested controllers case

Question

I am using angularjs for one of the my module in application. I want to update UI of various locations on page, so that all ui components will work synchronously as the model value changes.

here is my html-

<fieldset ng-controller="controller1" >
        <legend>Divs with common controller</legend>
        <div style="background-color:#eee;padding:3px;">
            <input type="text" ng-model="Model1" />
        </div>
        <div style="background-color:#eee;padding:3px;">
            <input type="text" ng-model="Model1" />
        </div>
    </fieldset>

    <fieldset ng-controller="controller1" >
        <legend>Divs with common controller</legend>
        <div style="background-color:#eee;padding:3px;" ng-controller="controller2">
            <input type="text" ng-model="Model1" />
            <input type="text" ng-model="Model2" />
        </div>
        <div style="background-color:#eee;padding:3px;">
            <input type="text" ng-model="Model1" />
        </div>
    </fieldset>

and my javascript -

var testApp = angular.module('testApp',[]);
        var mainApp = angular.module('mainApp',['testApp']);

        testApp.controller("controller1",['$scope',function($scope){
            $scope.Model1 = "testText";
        }]);

        testApp.controller("controller2",['$scope',function($scope){
            $scope.Model2 = "testText2";
        }]);
        angular.bootstrap(document, ['mainApp']);

In the html for first fieldset it is working properly. But in second fieldset it is not. So can anyone please tell me how do i achieve the functionality of first fieldset in second fieldset. Thanks.

here is the fiddle http://jsfiddle.net/HB7LU/9463/ .if you can explain much about the problem ! — Naeem Shaikh, Dec 23 '14 at 10:45

score 1 · Answer 1 · edited Dec 23 '14 at 13:33

1

use $rootScope instead of $scope

edited Dec 23 '14 at 13:33

lrineau

6,036
3
34
47

answered Dec 23 '14 at 13:01

code

61
4

score 0 · Answer 2 · answered Dec 23 '14 at 09:27

0

Can you use ng-controller="controller2" to particular input. Try this

<div style="background-color:#eee;padding:3px;"> <input type="text" ng-model="Model1" /> <input type="text" ng-model="Model2" ng-controller="controller2" /> </div>

answered Dec 23 '14 at 09:27

Anusha Nilapu

1,243
8
24
36

actually in my application it is not really the input element. Its a div in which another functionality is implemented. Here i have put input elements just for showing the scenario of my application – Shekhar Dec 23 '14 at 09:31
@Shekhar ok. Try to add controller2 to particular tag where Model2 is used – Anusha Nilapu Dec 23 '14 at 09:34

Dieterg · Answer 3 · 2014-12-23T13:57:25.097

It doesn't work because you create 2 seperate scopes/instances for controller1

<div>
   // Root scope
   <div ng-controller="controller1">
      // Child scope A
      // scope = new controller1();
   </div>
   <div ng-controller="controller1">
      // Child scope B
      // scope = new controller1();
   </div>
</div>

You can solve this problem by using the $rootScope directly or by creating a service. The recommended way is to avoid $rootScope whenever possible and use a service instead.

Value is probably the easiest way to create a service. Note that you can also use .service or .factory. Read more in the documentation about services.

testApp.value('myValue', {
    data: 'testText'
});

I'm using an object here so we can use this as a reference to the value, this is important for sharing data between controllers. If you want to know why then read more about reference & value types.

Now inject this service into your controller and use this data instead:

testApp.controller("controller1",['$scope', 'myValue',function($scope, myValue){
    $scope.Model1 = myValue;
}]);

On the view we need to update the bindings to the reference of the service:

<input type="text" ng-model="Model1.data" />

JSFIDDLE

score -1 · Answer 4 · edited May 23 '17 at 10:26

-1

USE THE DOT! ng-model without "." is bad. Please read this What are the nuances of scope prototypal / prototypical inheritance in AngularJS? The issue is fully described there.

edited May 23 '17 at 10:26

Community

1
1

answered Dec 23 '14 at 14:00

not-found.404

70
3

AngularJs - model value does not reflect on ui in nested controllers case

4 Answers4