reloading a ng-include template on ng-click

Question

I have a list of links and when I click on each of them, I call a file with ng-include. All I want is to reload the files when I re-click on those files. This is the list of links:

<ul class="list-group  gray-bg">
   <li class="list-group-item link" ng-click="show=1">something</li>
   <li class="list-group-item link" ng-click="show=1">something</li>
</ul>

And the section that changes in each click is like this:

<div ng-show="show==1">
    <div ng-include src="'templates/feature-descriptions/shop.phtml'"></div>
</div>
<div ng-show="show==2">
    <div ng-include src="'templates/feature-descriptions/no-credit.phtml'"></div>
</div>

Answer 1

In your case you could have ng-if instead of ng-show directive that will help you to make animate your div as it is going to add or remove on the basis of the expression given in ng-if directive.

As you want to refresh the ng-include element I'd suggest you have first set the dummy value to show scope variable and then give actual value to show so that the div will get remove and added like by doing ng-click="show=0;show=1;"

Markup

<ul class="list-group  gray-bg">
   <li class="list-group-item link" ng-click="show=0;show=1;">something</li>
   <li class="list-group-item link" ng-click="show=0;show=1;">something</li>
</ul>