diff --git a/app/components/templates/templates.html b/app/components/templates/templates.html
index 866c540f4..49ef933c1 100644
--- a/app/components/templates/templates.html
+++ b/app/components/templates/templates.html
@@ -121,7 +121,7 @@
       </rd-widget-header>
       <rd-widget-body classes="padding">
         <div class="template-list">
-          <div dir-paginate="tpl in templates | itemsPerPage: pagination_count" class="container-template hvr-underline-from-center" id="template_{{ $index }}" ng-click="selectTemplate($index)">
+          <div dir-paginate="tpl in templates | itemsPerPage: pagination_count" class="container-template hvr-underline-from-center" id="template_{{ tpl.index }}" ng-click="selectTemplate(tpl.index)">
             <img class="logo" ng-src="{{ tpl.logo }}" />
             <div class="title">{{ tpl.title }}</div>
             <div class="description">{{ tpl.description }}</div>
diff --git a/app/components/templates/templatesController.js b/app/components/templates/templatesController.js
index 3faaf3d08..1d442a9a3 100644
--- a/app/components/templates/templatesController.js
+++ b/app/components/templates/templatesController.js
@@ -184,7 +184,10 @@ function ($scope, $q, $state, $filter, Config, Info, Container, ContainerHelper,
 
   function initTemplates() {
     Templates.get(function (data) {
-      $scope.templates = data;
+      $scope.templates = data.map(function(tpl,index){
+        tpl.index = index;
+        return tpl;
+      });
       $('#loadTemplatesSpinner').hide();
     }, function (e) {
       $('#loadTemplatesSpinner').hide();