ng-bind-html with variable name coming from ng-repeat but variable defined elsewhere

Question

Hi I'm rather new to angular so I'm not sure if this is an obvious answer but I am trying to assign a variable through ng-repeat to ng-bind-html. However when I add in the variable through ng-repeat angular is only showing the variable name because it thinks the html content is coming from my ng-repeat data not elsewhere in angular.

My html:

<div class="brandInfo" ng-repeat="brand in itemPage.brandinfo" ng-click="widgetExpanded = !widgetExpanded">
    <div class="icon-wrapper">    
        <img ng-src="assets/img/icons/{{brand.icon}}"/>             
    </div>
    <p> {{brand.title}} </p>
    <div ng-slide-down="widgetExpanded" duration=".5">
        <p ng-bind-html="brand.iconClass"></p>
   </div>
</div>

My controller:

vm.brandinfo = [
                    {icon: "organicCotton.svg", iconClass: "organicCotton", title: "Organic Cotton"},
                    {icon: "lowImpactDye.svg", iconClass: "lowImpactDye", title: "Low Impact Dyes"},
                    {icon: "factory.svg", iconClass: "factory", title: "Regulated Factory"},
                    {icon: "carbonFootprint.svg", iconClass: "carbonFootprint", title: "Sustainable Business Practices"}
                ];

$scope.organicCotton = $sce.trustAsHtml(

            "<ul><li>Uses no pesticides or herbicides which a often toxic to humans and the environment</li> \
            <li>Conventional cotton accounts for 25% of global pesticide usage</li> \
            <li> Organic farming practices create healthy soils which make better use of water inputs and are more resilient in drought conditions</li> \
            <li> The water pollution impact of organic has been shown to be 98% less than non-organic cotton production.</li></ul>"

                );

so basically I have those scope variables set up for all the iconClass possibilities and even though I can place the right variable name (brand.iconClass) into the ng-bind-html directive. It only evaluated to "organicCotton" and doesn't recognize that it is a variable.

Thanks in advance for your help. Let me know if I can clarify further!

Answer 1

Please try this:

vm.organicCotton = $sce.trustAsHtml(

        "<ul><li>Uses no pesticides or herbicides which a often toxic to humans and the environment</li> \
        <li>Conventional cotton accounts for 25% of global pesticide usage</li> \
        <li> Organic farming practices create healthy soils which make better use of water inputs and are more resilient in drought conditions</li> \
        <li> The water pollution impact of organic has been shown to be 98% less than non-organic cotton production.</li></ul>"

            );

vm.brandinfo = [
                {icon: "organicCotton.svg", iconClass: vm.organicCotton, title: "Organic Cotton"},
                {icon: "lowImpactDye.svg", iconClass: vm.lowImpactDye, title: "Low Impact Dyes"},
                {icon: "factory.svg", iconClass: vm.factory, title: "Regulated Factory"},
                {icon: "carbonFootprint.svg", iconClass: vm.carbonFootprint, title: "Sustainable Business Practices"}
            ];

So, add the variable to your array, instead of the name of the variable as a string.