init() is not calling for second time onwards in a

Question

I've something like below. I am binding countries to a dropdown .

On dropdown change i've to display different views.

 $scope.countries = [{id : 1, name : 'USA1', pageName : 'USA'}, {id : 2, name : 'USA2', pageName : 'USA'},{id : 3, name : 'India3', pageName : 'India'}, {id : 4, name : 'India4', pageName : 'India'}];

 <select class="form-control" ng-model="selectedCountry" ng-options="country as country.name for country in countries">
    <option value="">Select Country</option>
 </select>

-

<div  ng-include="'views/'+selectedCountry.pageName+'.html'"></div>

i've init() method in both usaController & indiaController. Now,

1. If i select USA1 then usaController - init() - Calling
2. If i select India1 then indiaController - init() - Calling
3. If i select USA2 then init() - is not calling. -- Problem

Observation: If select X1 country then X.html will load. If select X2 then X.html is not refreshing ( init() is not calling). If i select Y1 country then Y.html loads. Now if i select X1 or X2 it is loading properly. Let say i selected X2 here.. working fine. again if i select X1 then same problem repeats.

My init() function in controller looks like below.

(function init() {
    getSomeThing();
})();

Any solution please?

Answer 1

Try to use

<div ng-include="'views/'+selectedCountry.name+'.html'" onload="getSomeThing()"></div>

Expression inside onload attribute should evaluate when a new partial is loaded.

ngInclude documentation