Why is the variable set in ng-init undefined in $scope in AngularJS?

Question

I have a variable I'm setting in my view with ng-init which I am then trying to access in my controller. When I try to access it however, I'm getting an undefined.

Relevant pieces of code:

My view:

<div ng-controller="MyCtrl">
  <div ng-init="pageTitle = 'kittens'">
  </div>
</div>

My controller:

var MyCtrl;

MyCtrl = function($scope) {
  return console.log($scope.pageTitle);
};

JSFiddle

What am I missing here?

Answer 1

Wait until the variable is init.

$scope.$watch('pageTitle', function () {
    console.log($scope.pageTitle); 
});

Answer 2

You can also take advantage of how JavaScript defines functions and use a function for ng-init instead of $watch (jsfiddle).

<div ng-app>
    <div ng-controller="MyCtrl" ng-init="pageTitleEquals('kittens')">
        Page title is {{ pageTitle }}
    </div>
</div>

Controller:

var MyCtrl = function($scope) {   
    $scope.pageTitleEquals = function(title) {
        $scope.pageTitle = title;
    }
};

This question is similar: How to set scope property with ng-init?

Answer 3

the controller is being created before the pageTitle variable is added to the $scope object.