angular expression working inside a script tag

Question

How do I get an angular expression working inside a script tag... I am pretty new to this and need help? Here is an example of my java script code:

    <script id="modal-2.html" type="text/ng-template">
<div class="modal transparent">
<div class="card">
<i class="icon ion-ios7-close close-modal" ng-click="closeModal(2)"></i>
<div class="item item-divider">
{{card.title}}
</div> 
<div class="item item-text-wrap">
{{card.details}}
</div>
</div>
</div>
</script>

Here is an example of my array:

.controller('TodoCtrl', function($scope, $ionicPopup, $timeout, $ionicModal, $ionicSideMenuDelegate) {

  $scope.cardss = 
  {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!'},
  ]; 

Answer 1

There is nothing special wrt use of AngularJS expressions inside partial templates.

As already said your model is actually array - so you'll have to iterate through the items using ng-repeat like this:

<ul>
    <li ng-repeat="card in cards">
        Card id: {{card.id}}
        Card title: {{card.title}}
        Card details: {{card.details}}
    </li>
</ul>

Please see working JSFiddle example.

Answer 2

Here is an example how you can use your template:

<div ng-include src="'modal-2.html'"></div>

or use it with a button:

<button ng-click="currentTpl='modal-2.html'">Show Modal</button>
<div ng-include src="currentTpl"></div>

The expression in the template then works as is usual.
Here is an example.