При нажатии кнопки перезагрузки другой шаблон angularjs

Question

Можно ли при нажатии на кнопку, перезагружать другой шаблон, не выходя из текущего шаблона в angular.js

<div ng-repeat="caracter in crit.characters" class="col-md-4"> 
    <a class="thumbnail" id="mySelect" ng-click="clickSelection(caracter.id)"> 
     <h4 align="center">{{caracter.name}}</h4> 
     <img ng-src="{{caracter.image_url}}"/> 
    </a> 
</div> 

Любая помощь будет оценена

Answer 1

Допустим, у вас есть 3 шаблоны

var templates = 
      [ { name: 'template1.html', url: 'temp1.html'} , 
       { name: 'template2.html', url: 'temp2.html'}, 
       { name: 'template3.html', url: 'temp3.html'} 
      ]; 

в вашем HTML использовать ng-template

<script type="text/ng-template" id="temp1.html"> 
    <!--YOUR TEMPLATE 1--> 
    </script> 
<script type="text/ng-template" id="temp2.html"> 
    <!--YOUR TEMPLATE 2--> 
    </script> 

<div ng-include="template.url"> 

</div> 

по нажатию кнопки вызова

$scope.changeTemplates=function(x){ 
      if(x.toUpperCase()=='temp1'){ 
       $scope.template=templates[1]; 
      }else if(x.toUpperCase()=='temp2'){ 
       $scope.template=templates[2]; 
      }else if(x.toUpperCase()=='temp3'){ 
       $scope.template=templates[0]; 
      } 
     } 

Это присвоит $scope.template HTML, из ng-template