angularjs - Angular - How to use a dynamic templateUrl for a directive? -

so, whatever reason, trying create slider, contents of each slide different html templates. instead of image slider, it's html slider.

so in html have code, , controls slider inside html template:

<slide-template></slide-template> 

and here entire slide module:

(function() {     'use strict';      angular         .module('slidectrl', [])      .directive('slidetemplate', function() {         return {             restrict: 'e',             templateurl: 'views/slides/slide-1.html',             replace: true,             controller: 'slidecontroller',             controlleras: 'slides'         }     })      .controller('slidecontroller', function() {          var vm = this;      });  })(); 

i'm not sure how move forward this, i've tried looking around haven't found felt use. inside controller, have array of slide template urls , corresponding variable indicate current slide:

slideurl = [ 'views/slides/slide-1.html', 'views/slides/slide-2.html']; slidenum = 0; 

ideally, directive use these variables determine variable use templateurl. default, can see slidenum 0, meaning want use slide1.html or slideurl[0]. so, templateurl slideurl[slidenum]. of course, can't done directive wouldn't able access data, i'm not sure how this.

the end result if clicked 1 of slide navigation icons, updating slidenum variable, instantly change templateurl used.

i guess wanting slider doesn't rely on images or content, instead slider of actual html content.

any ideas? if haven't explained myself enough, please let me know.

i suggest main directive, place different slides on 1 page.

for instance, main directive:

<div ng-include src="'slider0.html'" ng-if="slider%4==0"></div> <div ng-include src="'slider1.html'" ng-if="slider%4==1"></div> <div ng-include src="'slider2.html'" ng-if="slider%4==2"></div> <div ng-include src="'slider3.html'" ng-if="slider%4==3"></div> 

and in controller of directive set:

$scope.slider = 0; // more logic like: $scope.slider++;