Question

Buenas tardes, recien estoy moviendole a Angular y me gustaria pedir una consulta la cual estoy jugando con una lista la cual uno de sus items contiene codigo html ejemplo

  $scope.phones = [
    {'name': '<iframe width="100%" height="100" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/210944666&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

y quiero que el contenido de name del primer objeto lo renderise como html y no como texto, intente hacerlo con directivas pero aun no estoy muy familiarizado con eso :S en la parte visual recorro el objeto de la siguiente forma:

              <ul>
   <li ng-repeat="phone in phones">
     <p ng-bind-html="{phone.name}"> </p>
     <p>{{phone.name}}</p>
     <p>{{phone.snippet}}</p>
   </li>
 </ul>

Answer 1

¿Sería algo así?

angular.module('MyModule').controller('MyController', ['$scope', '$http', '$sce',
    function ($scope, $http, $sce) {
        $scope.renderHtml = function (htmlCode) {
            return $sce.trustAsHtml(htmlCode);
        };

        $scope.body = '<div style="width:200px; height:200px; border:1px solid blue;"></div>'; 

    }

//Tu vista HTML

<div ng-controller="MyController">
    <div  ng-bind-html="renderHtml(body)"></div>
</div>

Date una vuelta aquí