title: Why ng-init variable not overriden by controller?
body: <p>I am new to angular.</p>
  
  <p>Why my ng-init variable is not overriding in controller?</p>
  
  <pre><code>&lt;div ng-init="name='Emmad'" ng-controller="TodoController as todoCtrl" &gt;
       &lt;my-name&gt;&lt;/my-name&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>my controller is:</p>
  
  <pre><code>App.controller('TodoController',['$scope',function($scope){
      $scope.name = "Zahid";
  }]);
  </code></pre>
  
  <p>and my directive is :</p>
  
  <pre><code>App.directive('myName',function(){
      return {
          restrict: 'EA',
          template: '&lt;b&gt;{{name}}&lt;b&gt;'
      }
  });
  </code></pre>
  
  <p>The output is always:</p>
  
  <pre><code>Emmad
  </code></pre>
  
  <p>It should be 'zahid' because I am using the directive in controller and controller will override the name variable.</p>
  
  <p>Questions:
  <br>1-Why its not 'zahid'?
  <br>2-If I put breakpoint on </p>
  
  <pre><code>$scope.name = "Zahid";
  </code></pre>
  
  <p>I don't see 'name' variable in $scope why?</p>