How to access two controllers AngularJS?

Question

I need to have two instances of a controller. The first instance must set a variable and the second I have to read it. The variable to set is inside the object vm (so do not use $ scope).

The code of controller is:

app.controller("AppController", function(){
    var vm = this;

    vm.search = null;
});

The code of first html page is:

<div class="input-group" ng-controller="AppController as app">
    <input type="text" class="form-control" ng-model="app.search" placeholder="Search...">
</div>

And the code of second html page is:

<div class="input-group" ng-controller="AppController as app">
    {{app.search}}
</div>

But in the second page, the value of app.search is null.

Possible duplicate of [Share data between AngularJS controllers](http://stackoverflow.com/questions/21919962/share-data-between-angularjs-controllers) — Wilfredo P, Mar 28 '16 at 13:26
I I've already read that question but here use the $scope @WilfredoP — Lorenzo, Mar 28 '16 at 13:29
I had thought about it, but this way I do not have the advantage of using the two way data bounding @henrikmerlander — Lorenzo, Mar 28 '16 at 13:29
I did not know that I can use them simultaneously. In this case, how should I do? @KirillSlatin — Lorenzo, Mar 28 '16 at 13:34
Each created controller has its own isolated scope object, so scope.search in the first controller instance is a totally different variable from scope.search in the 2nd controller. — Hisham, Mar 28 '16 at 13:41
In fact I had already read this thing, but I do not know how to resolve this @Hisham — Lorenzo, Mar 28 '16 at 13:43
If you don't want to use services, then perhaps you could assign `$scope.vm = { search : '' }` (or something that fits your needs) and use `$scope.vm.search` in two child controllers — Kirill Slatin, Mar 28 '16 at 13:49
I believe this answer is what you are looking for. In short, it tells you how to use a service to share data. http://stackoverflow.com/a/14462341/4134409 — Hisham, Mar 28 '16 at 13:51

score 0 · Answer 1 · edited May 23 '17 at 11:59

I recommend using a service to communicate data between your controller instances. This answer explains it perfectly.

But if you are keen on not using a service to share data, you can store your search variable in the $rootScope, this will make it available in all your controller instances, and in every other controller in your app. I have to warn you, this is not proper data encapsulation.

Here is how to do it:

First HTML view:

<div class="input-group" ng-controller="AppController as app">
<input type="text" class="form-control" ng-model="$root.search" placeholder="Search...">

Second HTML view:

<div class="input-group" ng-controller="AppController as app">
    {{$root.search}}
</div>

Something like that, in the answer I linked there is a jsfiddle with a complete sample — Hisham, Mar 28 '16 at 14:13

score 0 · Answer 2 · answered Mar 28 '16 at 14:15

I created this factory:

.factory("search", function(){
    var stringaRicerca = null;
    return {
        getStringa: function(){
            return stringaRicerca;
        }, setStringa: function(stringa){
            stringaRicerca = stringa;
        }
    };
})

And the modified controller is:

app.controller("AppController", function("search"){
    var vm = this;

    vm.string = search.getString;

    vm.set = search.setString;
});

The first page modified is:

<div class="input-group" ng-controller="AppController as app">
    <input type="text" class="form-control" ng-model="search" placeholder="Search...">
    <button class="btn btn-default" ng-click="app.set(search)" type="button">GO!</button>
</div>

And the second page modified is:

<div class="input-group" ng-controller="AppController as app">
    {{app.string}}
</div>

But in the second page i see anything

How to access two controllers AngularJS?

2 Answers2