angular controller scope with html

Question

I have this code in controller `

(function () {
'use strict';
var LoginController = function($scope, $http, $timeout,$location,User) {
    $scope.user = {};
    $scope.flags = {
        error: false,
        rememberMe: true
    };
    $scope.signin = function() {
        $scope.errorMsg=false;
        $scope.successMsg=false;
        $scope.flags.loginInProgress=true;

        User.login($scope.user.password,$scope.user.email)
            .then(function(response) {

                if (response.data.success) {
                    $scope.successMsg=response.data.message;

                    $scope.flags.loginInProgress=true;
                    $timeout(function () {
                       $location.path('shop');
                    },2000);
                }else{
                    $scope.flags.loginInProgress=false;

                    $scope.errorMsg=response.data.message;

                    $scope.flags.error = true;
                };
            });
    };
    if (User.isLoggedIn()) {
        User.getUser().then(function (response) {
                $scope.user=response.data.user;
        })

    } else {
        $location.path('login');
    }
    $scope.logout=function () {
        User.logout();
        $timeout(function () {
            $location.path('home');
        },2000);
    };
};

LoginController.$inject = [
    '$scope',
    '$state',
    '$timeout',
    '$location',
    'User'
];

angular
    .module('pharmacy')
    .controller('LoginController', LoginController)
}());`

I use ui-router and i use {{user.name}} in page where LoginController is declared it is working but i use {{LoginController.user.name}} where controller is not declared it is doesn't working.

What could be the problem?

Answer 1

Just Try controllerAs syntax as provided by angular 1.5

<div ng-controller="loginController as login">
{{login.user.name}}
</div>

Answer 2

You can only access to a controller's scope in the view where that controller is. If you want to access to user's information in other places of the application you should store it elsewhere, a provider (factory for example).

Check the following jsbin: http://jsbin.com/vomifoyuqo/1/edit?html,js,console

var app = angular.module("AngularApp", ['test']);

angular.module('test', [])
    .controller('LoginController', ['$scope', 'AuthFactory', function($scope, AuthFactory) {
        $scope.user = AuthFactory.user;

        AuthFactory.signin();
    }])
    .controller('OtherController', ['$scope', 'AuthFactory', function($scope, AuthFactory) {
        $scope.user = AuthFactory.user;
    }])
    .factory('AuthFactory', ['$timeout', function($timeout) {
        var user = {};

        var signin = function() {
            console.log('signin');
            $timeout(function() {
                user.name = 'TEST';
                console.log('user name set');
            }, 500);
        };

        return {
            signin: signin,
            user: user
        };
    }]);