How can I pass down a value in the $scope to an inner controller in AngularJS?

Question

In my angular app.js that's the main controller in my index.html I want to have a function like this:

    $scope.login = function (user) {
        $scope.authenticating = true;
        var config = {
            method: 'POST',
            url: '/api/Account/Login',
            data: {
                'userName': user.loginUserName,
                'password': user.loginPassword,
                'rememberMe': user.loginRememberMe
            }
        };
        $http(config)
            .success(function (data) {         
                authentication.isAuthenticated = true;
                authentication.userName = user.loginUserName;
                localStorage.isAuthenticated = 'yes';
                $scope.template = $scope.templates[1];
                $state.transitionTo('home');
            })
    };

In my controllers that are for templates inside index.html I want to be able to get access to the userName. Can someone tell me how I can do this? Initially I tried setting $scope.user = {} in the app.js and then setting $scope.user.userName but when I open another template and its controller that's inside app.js the $scope.user does not seem to be visible.

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) — Julien, May 02 '14 at 09:56
I can understand passing between controllers. But in my case I want the data to go to a controller / page inside of the app.js. Is the $scope values not inherited down? — , May 02 '14 at 10:00

score 1 · Answer 1 · answered May 02 '14 at 10:04

You could use a service to share data between controllers

app.service('userService', function() {
  var user = {};

  setUserName = function(name) {
    user.name = name;
  };

  getUser = function(){
      return user;
  };
});

Controller that sets data

app.controller('FooController', ['$scope', 'userService',
    function ($scope, userService) {
        $scope.login = function (user) {
            $scope.authenticating = true;
            var config = {
                method: 'POST',
                url: '/api/Account/Login',
                data: {
                    'userName': user.loginUserName,
                    'password': user.loginPassword,
                    'rememberMe': user.loginRememberMe
                }
            };
            $http(config)
                .success(function (data) {
                    authentication.isAuthenticated = true;
                    userService.setUserName(user.loginUserName);
                    localStorage.isAuthenticated = 'yes';
                    $scope.template = $scope.templates[1];
                    $state.transitionTo('home');
                })
        };
    }
]);

Other Controller, that retrieves data

app.controller('BarController', ['$scope', 'userService', function($scope, userService) {
    var username = userService.getUser().name
});

Since your retrieval is async, you might need to add some event/callback mechanism to your user service, so the controllers get notified when the name is set / changes.

Is there now way to inherit downwards in AngularJS :-( I pass the $scope into my inner controller so I was thinking that outer controller $scope variables would be visible. — , May 02 '14 at 10:07
can you provide more code? Showcasing the structure of your dom and how the controllers are set up etc? — Robin Drexler, May 02 '14 at 10:22

score 1 · Answer 2 · answered May 02 '14 at 11:13

All child controllers inherit $scope variables from parents

<div ng-controller="c1">
    <div ng-controller="c2"></div>
</div>

youApp.controller('c1', ['$scope', function($scope){
    $scope.blabla = 1;
}]);

youApp.controller('c2', ['$scope', function($scope){
    // $scope.blabla is also 1 here because c2 is a child of c1
}]);

You can store anydata in built-in $rootScope service. Services are singleton in Angular

yourApp.run(['$rootScope', functin($rootScope){
    $rootScope.foo = 'bar';
    // you can inject $rootScope in any controller you want and use $rootScope.foo
}]);

As @Robin suggest, I also recommend to write your own service for authorization

can you give me an example of what a service would look like. Does it have to be as complex as Robin suggested with get and set functions? The key thing is I anyway need userName to be visible on the $scope as in my partial I have coded
{{ user.userName }} — , May 02 '14 at 12:55

How can I pass down a value in the $scope to an inner controller in AngularJS?

2 Answers2