Updating root scope variable with resource value

Question

In my main layout I have a heading, like:

<h1>{{ heading }}</h1>

I can set that to various static values from my controllers using:

$rootScope.heading = 'My Heading';

But if I try to create a dynamic heading from a resource, its blank:

app.controller('ShowAccountController', function($scope, $rootScope, $state, $stateParams, Account) {
  $scope.account = Account.get({ id: $stateParams.id });
  $rootScope.heading = $scope.account.name;
});

The account variable is definitely set there (checked via console) so I'm a bit stumped as to why the heading doesn't have a value?

Answer 1

As @sh0ber pointed out you are being confused be the way Chrome console works. Anyway, to set the heading variable you should use callback:

app.controller('ShowAccountController', function($scope, $rootScope, $state, $stateParams, Account) {
  $scope.account = Account.get({ id: $stateParams.id }, function(account){
    $rootScope.heading = account.name;
  });
});