'ng-if' - Multiple condition not working on template - angularjs

Question

I have 3 variety of template. by $index conditionally i am applying the template.
here is my directive html :
<all-apps-gallery index="$index" app="app" update="update(app)" class="show" ng-repeat="app in allAppsBatch"></all-apps-gallery>
and here is the directive:
var allAppsGallery = function ($compile, $animate) {
return {
restrict : 'E',
replace : true,
templateUrl : '/views/tools/gallery.html', // see below the html
scope : {
index : "=",
update : "&",
app : "="
}
}
}
}
angular
.module("tcpApp")
.directive('allAppsGallery', allAppsGallery);
My `templateUrl''s html :
<div>
<div ng-class="bgr box{{index}}" ng-click="update(app)" ng-if="{{index}} == 0 || {{index}} == 13 || {{index}} == 14 || {{index}} == 15 || {{index}} == 5 ">
<h2>{{app.completion}} % {{index}}</h2>
<span>{{app.name}}</span>
</div>
<div ng-class="bbr box{{index}}" ng-click="update(app)" ng-if="{{index}} == 2 || {{index}} == 3 || {{index}} == 4 || {{index}} == 6 || {{index}} == 10 || {{index}} == 11 || {{index}} == 12">
<h2>{{app.completion}} %</h2>
<span>{{app.name}}</span>
</div>
<div ng-class="bbl box{{index}}" ng-click="update(app)" ng-if="{{index}} == 1 || {{index}} == 7 || {{index}} == 8 || {{index}} == 9 ">
<h2>{{app.completion}} %</h2>
<span>{{app.name}}</span>
</div>
</div>
Here according to the index value, i am switching the template. but it's not working for me. what is the wrong i made here?
Any one figure-out me please?
Thanks in advance.
I am getting this error:
Error Link

Answer 1

ngIf directive expects an expression, and hence you don't need to have interpolation tags {{ }} in it. Attribute value will be parsed and evaluated by Angular, however {{ tags make value an invalid JS expression and cannot be processed.
Correct code would be
ng-if="index == 0 || index == 13 || index == 14 || index == 15 || index == 5 "