Render html from the database using angular 1.6.1

Question

I have the following page using angular, jquery and bootstrap:

var app = angular.module('tblModule', []);
app.controller('tblController', function($scope) {
  $scope.testes = [
    {
      "teste": 1,
      "oi": "O que \u00e9 a loren ipsum?",
      "ai": "<ul><li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>   <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li><li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li><li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li></ul>"
    }, {
      "teste": 2,
      "oi": "Disclaimer sobre a loren ipsum?",
      "ai": "<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ul>"
    }
  ]
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="man">
  <div class="container">
    <h1>Teste</h1>
    <div class="entry-content">
      <div id="accordion" class="panel-group">
        <div ng-app="tblModule" class="panel panel-default">
          <div ng-controller="tblController">
            <div ng-repeat="teste in testes">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a class="collapsed" href="#teste{{ teste.teste }}" data-toggle="collapse" data-parent="#accordion"> {{ teste.oi }}</a>
                </h4>
                <p></p>
              </div>
              <div id="teste{{ teste.teste }}" class="panel-collapse collapse">
                <div class="panel-body">{{ teste.ai }}</div>
                <p></p>
              </div>
              <p></p>
              <hr>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

I pull the data from the database test object using ajax-$http of angular:

 $http({
      method: 'POST',
      url: '/api/teste/',
      headers: {
        'Content-Type': "application/x-www-form-urlencoded"
      },
      data: $httpParamSerializerJQLike({
        variaveis
      })
      }).then(function(response) {
        $scope.teste = response.data
      }
 });

I searched the Soen a way to render the html that comes along the database, it has several answers, but I’m not able to implement any, I think I’m doing something wrong.

Answer 1

It is necessary to include:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>

And then:

<div ng-bind-html="teste.ai" class="panel-body">{{ teste.ai }}</div>

See working :

var app = angular.module('tblModule', ['ngSanitize']);
app.controller('tblController', function($scope) {
  $scope.testes = [
    {
      "teste": 1,
      "oi": "O que \u00e9 a loren ipsum?",
      "ai": "<ul><li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>   <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li><li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li><li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li></ul>"
    }, {
      "teste": 2,
      "oi": "Disclaimer sobre a loren ipsum?",
      "ai": "<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ul>"
    }
  ]
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="man">
  <div class="container">
    <h1>Teste</h1>
    <div class="entry-content">
      <div id="accordion" class="panel-group">
        <div ng-app="tblModule" class="panel panel-default">
          <div ng-controller="tblController">
            <div ng-repeat="teste in testes">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a class="collapsed" href="#teste{{ teste.teste }}" data-toggle="collapse" data-parent="#accordion"> {{ teste.oi }}</a>
                </h4>
                <p></p>
              </div>
              <div id="teste{{ teste.teste }}" class="panel-collapse collapse">
                <div ng-bind-html="teste.ai" class="panel-body">{{ teste.ai }}</div>
                <p></p>
              </div>
              <p></p>
              <hr>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>