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?

that's because console.log() returns undefined, then you return that value as controller. — Umur Kontacı, Sep 04 '13 at 07:51

score 36 · Accepted Answer · answered Sep 04 '13 at 08:01

36

Wait until the variable is init.

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

answered Sep 04 '13 at 08:01

DimaOverflow

1,513
1
16
18

I prefer `$timeout(function () { /* ... */ });` – Hafez Divandari Jan 25 '17 at 22:28

score 15 · Answer 2 · edited May 23 '17 at 12:09

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?

score 12 · Answer 3 · answered Sep 04 '13 at 08:05

12

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

answered Sep 04 '13 at 08:05

Anton

7,709
5
31
33

score 3 · Answer 4 · answered Apr 21 '15 at 18:08

Since you are doing a "single time init", like a constructor I recommend you to unbind the watch after using the variable:

var pageTitleWatch = $scope.$watch('pageTitle', function () {
    console.log($scope.pageTitle);
    // Now just unbind it after doing your logic
    pageTitleWatch();
});

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

4 Answers4

Linked