AngularJS Route

embedded template

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script type="text/ng-template" id="embeded.tpl.html">
    <ul>
    <li ng-repeat="card in cards">
        Card id: {{card.id}}
        Card title: {{card.title}}
        Card details: {{card.details}}
    </li>
    <ul>
</script>

<div ng-controller="MyCtrl">

    <ul>
        <li><a href="#/link">Cards route</a></li>
    </ul>
    
    <div ng-view></div>
</div>

JavaScript

var myApp = angular.module('myApp', ['ngRoute']);

myApp.controller('MyCtrl', function($scope) {

});

myApp.controller('CardsCtrl', function($scope) {
  $scope.cards = [
      {id:1, title:'Frank', src:'img/Frank.png',details:'This will be the products description!'},
      {id:2, title:'Generali', src:'img/Generali.png',details:'This will be the products description!'},
      {id:3, title:'John Lewis', src:'img/JohnLewis.png',details:'This will be the products description!'}
  ]; 
    
});

myApp.config(function($routeProvider) {
       
    $routeProvider.when('/link', {
        controller: 'CardsCtrl',
        templateUrl: 'embeded.tpl.html'
    });
});