Accessing model data from outside a controller's scope in AngularJS

Question

This is my HTML right now, it has all the stuff in it, from the HTML itself, to the script:

<!doctype html>
<html lang="en-US" ng-app>
    <!--Head-->
    <head>
        <meta charset="UTF-8">
        <title>Lesson 5 - ng-show & ng-hide</title>
        <meta name="viewport" content="width=device-width">
        <style type="text/css">
            * {
                box-sizing: border-box;
            }
            body {
                font: 16px/1.5 sans-serif;
                color: #222;
                margin: 5em;
            }
        </style>
    </head>
    <!--Body-->
    <body ng-controller="information">

        <div>
            <label for="name">
                Name:
                <input type="text" name="username" id="username" placeholder="Your name here please" ng-model="name"/>
            </label>
            <br>
            <label>
                Hide?
                <input type="checkbox" ng-model="checked"/>
            </label>
        </div>

        <div ng-hide="checked">
            Hidden Message here
            <br>
            Welcome {{ name || "user" }}!
        </div>


        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script type="text/javascript">
            var information = function ($scope) {
                console.log($scope);
            }
        </script>
    </body>
</html>

As you can see, this is a simple HTML page using AngularJS. You can see that the body is controlled by a controller called information.

Now, the thing is, once you remove information, from the body tag, and place it into the first div tag (as in place ng-controller="information" into div tag instead of body tag), you will see that the program ceases to work (as in if you type in your name, it will not appear), and that is to be expected since the other div is outside the range of the controller.

Now, what I want to ask, is how do you access the data from another controller inside of your HTML? I've tried the following:

{{ information.name || "user" }} <- First attempt
{{ information.$scope.name || user }} <- Second attempt, since {{}} evaluates JS

And in the end, I an not able to get my desired result. So, how can I access information from another scope into a div tag that is independent of any scope?

And why you need to have content outside any controller? what are you trying to achieve? — chris-l, Aug 01 '13 at 17:59
possible duplicate of [How can I pass variables between controllers in AngularJS?](http://stackoverflow.com/questions/12008908/how-can-i-pass-variables-between-controllers-in-angularjs) — zs2020, Aug 01 '13 at 17:59
@chris: Well, I'm just learning right now. I just want to know if it can be achieved. — Games Brainiac, Aug 01 '13 at 17:59
@sza: If you note, that is between controllers, this is between something that is under a controller and something that is just html. — Games Brainiac, Aug 01 '13 at 18:00
@GamesBrainiac ah, well as far as I know, no. The content has to be part of an scope. But maybe I'm wrong and someone can enlighten us about it. — chris-l, Aug 01 '13 at 18:03
ng-app tells angular in what portion of the page it should be active on. If you place ng-app in the first div, angular gets active within that div. Since {{name}} is in other div, it wont work. — AlwaysALearner, Aug 01 '13 at 18:03
@Codezilla: Well, if you take a look, `ng-app` is set on html, so technically, the whole page is active. What I want to know if you can pass data to something that is not within a scope, but still within the ng-app. — Games Brainiac, Aug 01 '13 at 18:10
Sorry for the misleading comment. The thing is if you move the ng-controller directive to the first div, the models inside that div would get attached to the scope of the controller and wont be available anywhere outside of that div. — AlwaysALearner, Aug 01 '13 at 18:13
See @sza's comment. The whole purpose of a controller is to set up scope for HTML. If some HTML is outside the scope of the controller, and you need to access some piece of data from the controller, you need to use a service to share the data between controllers. — Lukas, Aug 01 '13 at 18:14
@Lukas: The thing that drives me to believe that this can be done are the mustaches. I mean, since they evaluate JS, if you have controllers which are global variables, then it should hypothetically be possible. — Games Brainiac, Aug 01 '13 at 18:18
@GamesBrainiac mustaches is not a self-contained framework like angularjs, angularjs organizes all data by its scope. The only way you can access to the model is via scope. — zs2020, Aug 01 '13 at 18:39

score 0 · Answer 1 · answered Sep 13 '13 at 09:45

Do one thing.

Create a service, that has a getter setter property. When you want to send data from a controller, then set the message or variable or object. And use the get function in the controller where you want to access it. This way you can pass data through the controllers easily. If you still can't let me know.

Accessing model data from outside a controller's scope in AngularJS

1 Answers1