calling function within td element to set the text - angularjs

Question

I am trying to call a function within a <td> element that is part of a ng-repeat. Any ideas how to get this to work? I have tried so many things and no joy. The issue is the cartperf.perf_desc binding.
<table class="table table-striped table-condensed" >
<tr ng-repeat="cartperf in $ctrl.cartSummary">
<td class="cs-cart-sum-td">{{cartperf.id}}</td>
<td class="cs-cart-sum-td" ng-bind="$ctrl.myNewHtml(cartperf.perf_desc)"></td>
<td class="cs-cart-sum-td">{{cartperf.perf_dt}}</td>
<td class="cs-cart-sum-td">{{cartperf.theater}}</td>
<td class="cs-cart-sum-td">{{cartperf.num_tkts}}</td>
<td class="cs-cart-sum-td">{{cartperf.due_amt}}</td>
<td class="cs-cart-sum-td">
<button type="button" data-perf='cartperf' class="btn btn-link cs-btn-delete" ng-click="$ctrl.confirmDelete(cartperf)">{{cartperf.RemoveBtnTxt}}</button>
</td>
</tr>
</table>
Controller that drive the template
function cartSummaryController() {
this.$onInit = function () {
//Get content from Parent
this.globalContent = this.getGlobalContent;
this.cartSummary = this.cartPerfs;
this.myHtml = this.myNewHtml;
}; //End $onInit
}
Main Controller
function subAppController($sce) {
this.$onInit = function () {
//Get content from Parent
this.globalContent = this.getGlobalContent;
}; //End $onInit
this.continueClick = function () {
console.log("Continue Selected");
};
this.currentStep = 1;
this.contentJson = pcContent;
this.globalContentJson = pcGlobalContent;
this.cartPerfs = pcCartPerfs
//Called from the template to get global content.
this.getGlobalContent = function (module, item) {
var globalContent = new contentProvider(this.globalContentJson);
var result = globalContent.get(module, item);
return result;
}
this.myNewHtml = function (item) {
var result = $sce.trustAsHtml(item);
return result;
}
//Get the current count of valid performance in the cart
// We use this to determine if we hide/disable the continue buttons.
this.min_perfs = this.contentJson.required_min_perfs;
this.curr_perf_count = this.cartPerfs.length;
this.continueActive = this.curr_perf_count >= this.min_perfs;
}
Main Template
<div class="container-fluid">
<!--Top (Bread crumbs and Cart Summary)-->
<div class="cs-app-top row">
<div class="cs-app-left col-sm-3">
<div class="pull-left">
<div class="bcrumbs">Step 1 > Step2</div>
<div>
<label class="cs-page-title">{{$ctrl.contentJson.page_title}}</label>
</div>
</div>
</div>
<div class="cs-app-right pull-right col-sm-9">
<cart-summary content-json="$ctrl.contentJson"
get-global-content="$ctrl.getGlobalContent(module,item)"
cart-perfs="$ctrl.cartPerfs"
my-new-html="$ctrl.myNewHtml(item)">
</cart-summary>
<div class="cs-continue-btn-div pull-right">
<button class="cs-continue-btn cs-btn"
ng-bind="$ctrl.globalContent('subpackage','continueBtnText')"
ng-class="{'hidden': !$ctrl.continueActive}"
ng-disabled="!$ctrl.continueActive"
ng-click="$ctrl.continueClick()" ></button>
</div>
</div>
</div>
<!--Header Content-->
<div class="cs-header row">
<div ng-bind-html="$ctrl.myNewHtml($ctrl.contentJson.page_header)"></div>
</div>
<!--Main Section (perf-list)-->
<div class="cs-app-main row">
<div>
<perf-list ng-if="$ctrl.currentStep == 1"
content-json="$ctrl.contentJson"
get-global-content="$ctrl.getGlobalContent(module,item)">
</perf-list>
</div>
</div>
<!--Footer-->
<div class="cs-app-footer row">
<div class="cs-continue-btn-div pull-right">
<button class="cs-continue-btn cs-btn"
ng-bind="$ctrl.globalContent('subpackage','continueBtnText')"
ng-disabled="!$ctrl.continueActive"
ng-click="$ctrl.continueClick()"></button>
</div>
</div>
</div>
--Module
var myApp = angular.module('subPackages', ['ngMaterial', 'ngMessages','ngSanitize']).config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
// Allow same origin resource loads.
'self',
// Allow loading from our assets domain. Notice the difference between * and **.
'Protected content**'
]);
});
(function (app) {
'use strict';
app.component('appComponent', {
templateUrl: '../subpackages/templates/app-template.html',
controller: subAppController
});
app.component('cartSummary', {
templateUrl: '../subpackages/templates/cart-summary.template.html',
controller: cartSummaryController,
bindings: {
contentJson: '<',
cartPerfs: '<',
getGlobalContent: '&',
myNewHtml: '&'
},
});
app.component('perfList', {
templateUrl: '../subpackages/templates/perf-list.templateV3.html',
controller: PerfListController,
bindings: {
contentJson: '<',
getGlobalContent: '&'
},
});
})(myApp);

Answer 1

You could create a custom directive as show in Execute a function inside ng-repeat in AngularJS

Answer 2

Found the solution. Instead of doing this
<td class="cs-cart-sum-td" ng-bind="$ctrl.myNewHtml(cartperf.perf_desc)"></td>
I did this.
<td class="cs-cart-sum-td" ng-bind-html="$ctrl.myHtml({item: cartperf.perf_desc})"></td>