Q:

Using AngularJS 1.2.16, unique issue with data escaping for href links

having issues with ng-href i can use target="_blank" using AngularJS 1.2 ,old post but found what is going on leading me to another question,I have a page that has a table inside an accordian, in the JS file i have my angular functions and i have this:
var CapitalRequestMultiMillInquiryController = function ($scope, $rootScope, $modal, $window, CapitalRequestService, PlantService) {

$rootScope.title = 'Capital Request Multi Mill Inquiry';
$scope.allMills = [];
$scope.selectedMill = '';
$scope.jobNumber = '';
$scope.description = '';
$scope.amount = '';
$scope.amountOperator = '';
$scope.openOnly = '';
$scope.projectManager = '';

//$scope.allUsers = [];

//UsersService.getUsersWithId().then(function(objectTypes) {
//    $scope.allUsers = objectTypes
//});

//$scope.openurl = function() {
//    $scope.openurl = function(url) {
//        $location.path(url, '_blank')
//    }
//}

PlantService.getPlantId().then(function (mills) {
    $scope.allMills = mills
});

$scope.search = function() {
    //for each mill

    CapitalRequestService.searchMulti("http://coucmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.selectedMill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
        $scope.counce = results;
    });
    CapitalRequestService.searchMulti("http://filcmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.selectedMill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
         $scope.filer = results;
     });
    CapitalRequestService.searchMulti("http://tomcmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.selectedMill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
        $scope.tomahawk= results;
    });
    CapitalRequestService.searchMulti("http://tridentval.pca.com/api/Inquiry/Inquiry/CapitalRequestMultiMillInquiry/Search", authenticatedUser.userName.toUpperCase(), $scope.selectedMill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
        $scope.valdosta = results;
    });
    CapitalRequestService.searchMulti("http://tridentder.pca.com/api/Inquiry/Inquiry/CapitalRequestMultiMillInquiry/Search", authenticatedUser.userName.toUpperCase(), $scope.selectedMill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
        $scope.deridder = results;
    });
}
};

and my HTML page i have this:
   <tbody>
                    <tr ng-repeat="item in tomahawk">
                          <td>{{item.projectManager}}</td>
                          <td>{{item.jobNumber}}</td>
                        <td>{{item.description}}</td>
                        <td>{{item.totalAmount*1000 | currency}}</td>
                    </tr>
                </tbody>
            </table>

and i still have this in my view which leads me to believe that the URL that this is getting information from has an anchor tag that isnt displaying the data correctly because i am using angular on this end. how would i escape the angular contraints for href's such that my data will display normally and be clickable to download a picture on next page? i posted another post earlier and thought that something was up with this end. but i remover everything and saw that it was still returning the anchor tag in my display which means its where the source is and its pushing that to me. the picture below is an older picture they are not clickable when i take everything out of my app on my end, leaving just a table pulling in the data.

A:

You'll need to let Angular know that the data you have is trusted HTML, and bind it to the td elements.
In your controller, you'll need to use $sce to replace the HTML with trusted HTML:
CapitalRequestService.searchMulti("http://tomcmmsweb.pca.com/CapitalRequest/Search", authenticatedUser.userName.toUpperCase(), $scope.selectedMill, $scope.jobNumber, $scope.description, $scope.amount, $scope.amountOperator, $scope.openOnly, $scope.projectManager).then(function (results) {
    $scope.tomahawk = results;
    $scope.tomahawk.forEach(function(item){
        item.jobNumber = $sce.trustAsHtml(item.jobNumber);
        item.description = $sce.trustAsHtml(item.description);
    });
});

And in your view
   <tbody>
                    <tr ng-repeat="item in tomahawk">
                          <td>{{item.projectManager}}</td>
                          <td ng-bind-html="item.jobNumber"></td>
                          <td ng-bind-html="item.description"></td>
                          <td>{{item.totalAmount*1000 | currency}}</td>
                    </tr>
                </tbody>
            </table>

Edit: I changed the for-loop to a forEach iteration, simply because it seems a little cleaner. Check my edit history if you want the way it was before.

