Can I use one controller updating two views in AngularJS?

Question

Is it possible, to have two views bound to one controller, so that both views get updated no matter where the data was changed (view1, view2 or in the model)? It should work like this example (removed clutter).

<script>
    angular.module('foobar', []).controller('ContentCtrl', ['$scope', function($scope) {
        $scope.content = {'title': 'Foo', 'subtitle': 'Bar', 'text': 'desc'};
    }]);
</script>

<form action="#" ng-controller="ContentCtrl">
    <input type="text" ng-model="content.title">
    <input type="text" ng-model="content.subtitle">
    <textarea ng-model="content.text"></textarea>
</form>

<div ng-controller="ContentCtrl">
    <input type="text" ng-model="content.title">
    <input type="text" ng-model="content.subtitle">
    <textarea ng-model="content.text"></textarea>
</div>

Here is a Plunker: http://plnkr.co/edit/UDs10RhG7mJR8813epwO?p=preview

dnc253 · Accepted Answer · 2013-08-26 15:17:05Z

5

There's no reason you can't do this, but the same object has to be in the scope of both controllers. See http://plnkr.co/edit/ILzGCs9AYiPTETE92KTm?p=preview

In the original example, each scope has it's own object, and so each is operating on their own object. If both scopes share the same object, then each is operating on the same object, and thus changes in one scope is reflected in the other.

answered Aug 26, 2013 at 15:17

dnc253

40.4k41 gold badges145 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

acme Over a year ago

Great, it's really that simple. Thanks!

Collectives™ on Stack Overflow

Can I use one controller updating two views in AngularJS?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related