Angular.js: ng-init doesn't trigger on model changes

[bluehallu]

Here's a plunkr:

http://plnkr.co/edit/ByHMH0gX7Cp0aQjoHx4q?p=preview

[lgalfaso]

Some angular core developers may disagree with me, but I think what you are seeing is the expected behavior

[bluehallu]

I quote the official docs on ng-init:

"The only appropriate use of ngInit is for aliasing special properties of ngRepeat"

What's the point of using an alias that doesn't update it's value?

[caitp]

@hallucynogenyc, those docs are a bit silly, this really is working as expected. Now, there has been some talk about adding a separate way to define an alias for $index in ngRepeat, so this may end up happening some day, but ngInit is working as expected. It's in the name "init", it's unclear why you would expect it to react to model changes.

[tclausing]

@hallucynogenyc, I had the same need. My solution was a directive that does a $watch. See my fork of your plunk:

http://plnkr.co/edit/K5WKF77BMfLEarDrHsDJ?p=preview

[odedniv]

@tclausing this worked perfectly!
I called the directive alias instead of myVar, but I'll be using this from now on.

My translation to CoffeeScript in case anyone needs it:

angular.module('myApp', []).directive 'alias', ->
  restrict: 'A'
  link: (scope, element,attrs) ->
    splits = attrs.alias.split('=')
    scope.$watch(splits[1], (val) -> scope.$eval(attrs.alias))

[turbobuilt]

I agree that this works as named, but it would be very nice to have something like this that updates reactively.

Unfortunately with @tclausing solution I got the 10 $digest reached. I'm using Meteor, and the ng-init was supposed to store the result of a minimongo query. I ended up just doing the query multiple times, one for each place a property was needed. Not as elegant, but it works.

[soichih]

I was using ng-init to refactor repeated complex references.. like this.

<div ng-init="stuff = a[some.id][another.id][foo.id]">
   {{stuff.something}}
   {{stuff.abc}}
   {{stuff.efg}}
</div>

Without using "stuff" as an alias, I will have to repeat the same references over and over which makes it harder to maintain. However, since ng-init is only evaluated once, angular won't update the content if any of the variables referenced changes.

The documentation says to use controller, but I can't think of a way to store such alias via controller unless I cache every single combinations used in the index..

[gkalpak]

You could always create your own directive :smiley:
Or use a workaround like:

<div>
   {{(stuff = a[some.id][another.id][foo.id]).something}}
   {{stuff.abc}}
   {{stuff.efg}}
</div>

(which is ugly and not recommended, but works :flushed:)

[soichih]

@gkalpak I tried your workaround but it didn't work.. I guess creating a directive is the only option?

[gkalpak]

@soichih, well...it works for me...
But it's a hack...
But it works...
_{But it's a hack...
But it works...
But it's a hack...
But it works...
But it's a hack...
But it works...
But it's a hack...
But it works...
But it's a hack...
But it works...}

:stuck_out_tongue:

[lukaszprus]

How about this:

<div ng-init="$watch('stuff = a[some.id][another.id][foo.id]).something')">
    {{ stuff }}
</div>

?

Not a hack and no directive is needed.

[gkalpak]

The "not a hack" part is debateable, but it should work (and is less ugly than my hack :grin:).

[Thaina]

Currently now I was hacked it as ng-repeat of single element array

<div ng-repeat="item in [ SomeThingIWantToBeProperty ]">

</div>

[WuglyakBolgoink]

https://github.com/angular/angular.js/issues/6425#issuecomment-371528220
work perfect! ^_^

[CarMoreno]

@lukaszprus Save my day!

[doug147]

How about this:

<div ng-init="$watch('stuff = a[some.id][another.id][foo.id]).something')">
    {{ stuff }}
</div>

?

Not a hack and no directive is needed.

2 years later.. but thank you. :)