Why ng-init variable not overriden by controller?

Question

I am new to angular.

Why my ng-init variable is not overriding in controller?

<div ng-init="name='Emmad'" ng-controller="TodoController as todoCtrl" >
     <my-name></my-name>
</div>

my controller is:

App.controller('TodoController',['$scope',function($scope){
    $scope.name = "Zahid";
}]);

and my directive is :

App.directive('myName',function(){
    return {
        restrict: 'EA',
        template: '<b>{{name}}<b>'
    }
});

The output is always:

Emmad

It should be 'zahid' because I am using the directive in controller and controller will override the name variable.

Questions:
1-Why its not 'zahid'?
2-If I put breakpoint on

$scope.name = "Zahid";

I don't see 'name' variable in $scope why?

http://stackoverflow.com/questions/17104639/ng-init-ng-controller-strange-behavior-in-the-controllers-scope — Anik Islam Abhi, Nov 07 '15 at 06:25
you need to look at this answer http://stackoverflow.com/a/33285651/2435473 where I mention exactly how `ng-init` work — Pankaj Parkar, Nov 07 '15 at 06:25

score 0 · Accepted Answer · edited May 23 '17 at 12:23

Thanks @Pankaj Parkar for detailed answer here and below is the excerpt of answer.

Technically, what happening is that the ng-init directive gets evaluated after the ng-controller function gets registered. That's why initialized values from the ng-init are not available inside the controller.

Basically, the reason behind ng-controller getting called first is the priority. If you look at the priority, the ng-init directive has 450 & the priority option of directive, where ng-controller directive has 500, while compiling the directive from the DOM AngularJS sorts them as per priorities. Thus ng-controller gets executed first.

Why ng-init variable not overriden by controller?

1 Answers1