AngularJS: scope of ng-init

ng-init does not create a new scope, it evaluates an expression in the current scope. In your example, both your ng-init are in the same scope, changing the same model property will affect the other. If you need separate scope, you could try ng-controller.

<div ng-controller="MainCtrl" ng-init="model = { year: '2013'}">
      <a href="" ng-click="model.year = '2012'">2012</a> |  <a href="" ng-click="model.year = '2013'">2013</a>
      <div>Showing {{ model.year }}</div>
      <hr />
    </div>
<div ng-controller="MainCtrl" ng-init="model = { year: '2013'}">
      <a href="" ng-click="model.year = '2012'">2012</a> |  <a href="" ng-click="model.year = '2013'">2013</a>
      <div>Showing {{ model.year }}</div>
 </div>

DEMO

Side notes: In this case, you don't need ngInit, just initialize the value directly in your controller.

The only appropriate use of ngInit is for aliasing special properties of ngRepeat. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

https://docs.angularjs.org/api/ng/directive/ngInit


Since ng-if creates a new scope, you can accomplish it just by:

<div ng-if="true" ng-init="model = { year: '2013'}">