Показать / скрыть URL шаблона в angularjs

У меня есть динамический массив в контроллере, у которого есть шаблоны (html файлы), похожие на ниже

 $scope.templates =
      [ { name: 'template1.html', url: 'template1.html'},
        { name: 'template2.html', url: 'template2.html'} ];

У меня есть выпадающий список, чтобы выбрать шаблон. Я использую ng-include в html для получения этих файлов. Проблема заключается в следующем: когда я загрузил template1.html, а затем переключился на template2.html, я хочу скрыть данные template1.html и показать template2.html. В следующий раз, когда я выберу template1.html, я хочу скрыть данные template2.html и показать данные template1.html вместо загрузки template1.html снова.

Я пробовал ниже: html:

<div ng-controller="ExampleController">
  <select ng-model="template" ng-options="t.name for t in templates">
   <option value="">(blank)</option>
  </select>
  url of the template: <code>{{template.url}}</code>
  <hr/>
  <div class="slide-animate-container" ng-show="template.isHidden">
    <div  class="slide-animate" ng-include="template.url"></div>
  </div>
  <div class="slide-animate-container" ng-hide="template.isHidden">
    <div  class="slide-animate"></div>
  </div>
</div>

app.controller('ExampleController', ['$scope', function($scope) {
    $scope.templates =
      [ { name: 'template1.html', url: 'template1.html'},
        { name: 'template2.html', url: 'template2.html'} ];
    $scope.template = $scope.templates[0];
    $scope.$watch('template',function(newValue, oldValue) {
      $scope.templates[0].isHidden = true;//will do _.each to update
      $scope.templates[1].isHidden = true;
      var xyz = $scope.template;
      xyz.isHidden = false;
    });
  }]);

template1.html, template2.html могут быть нормальными html файлами.

Пожалуйста, предложите.

https://plnkr.co/edit/TJKYbDrp1C1g4fQNHCi2?p=preview