angularjs - How to switch template in angular directive by the condition of `index` value -

i require change template according count of index getting ng-repeat how achieve that?

in case if index 0, want change `template' here code :

"use strict"; angular.module("tcpapp")      .directive('programname', function () {         return {             restrict    : 'ae',             replace     : true,             scope       : {                             name:'@',                             index:'@'                         },             template    : '<h2 class="que t{{index}}" ng-click=callme()>{{name}}</h2>',             link        : function (scope, element, attr) {                             scope.callme = function () {                                 console.log($(element).prop('class'));                             }                         }         }     }); 

i tried throws error:

    template    : scope.index ? '<h2 class="que t{{index}}" ng-click=callme()>{{name}}</h2>' : '<h2 class="que t{{index}}" ng-click=callme()>{{name}}arif</h2>', 

error: referenceerror: scope not defined

html

<div class="progname">                 <div class="swiper"></div>                  <program-name name="{{appname.title}}" data-page="home" index="{{$index}}" ng-repeat="appname in appnames"></program-name>             </div> 

i've not tested should able 1 :

.directive('programname', function ( $compile ) {         return {             restrict    : 'ae',             replace     : true,             scope       : {                             name:'@',                             index:'@'                         },              link        : function (scope, element, attr) {                             scope.callme = function () {                                 console.log($(element).prop('class'));                             }                              var gettemplate = function( index ) {                               return number(index) ? '<h2 class="que t{{index}}" ng-click=callme()>{{name}}</h2>' : '<h2 class="que t{{index}}" ng-click=callme()>{{name}}arif</h2>';                              }                               element.html(gettemplate(scope.index));                              $compile(element.contents())(scope);                         }         }     }) 

edit

or better solution be:

.directive('programname', function ( ) {             return {                 restrict    : 'ae',                 replace     : true,                 scope       : {                                 name:'@',                                 index:'@'                             },                  template : function(telement, tattrs) {                       return number(tattrs.index) ? '<h2 class="que t{{index}}" ng-click=callme()>{{name}}</h2>' : '<h2 class="que t{{index}}" ng-click=callme()>{{name}}arif</h2>';                 },                   link        : function (scope, element, attr) {                                 scope.callme = function () {                                     console.log($(element).prop('class'));                                 }                             }             }         })