Render HTML in AngularJS templates using `ng-bind-html`

When you want to render HTML in AngularJS templates, you have to use the attribute ng-bind-html. For security reasons, AngularJS requires you to add as dependency angular-sanitize.
Below you can find an example on how to render HTML in the search results page.


You encounter the error Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context when rendering HTML tags in an Angular JS template.

<div ng-repeat="record in vm.invenioSearchResults.hits.hits track by $index">
  <div ng-bind-html="'<p>This is <em>HTML</em></p>'"></div>
  <div class="well">
     <h4>{{ record.metadata.abstract }}</h4>


Use angular-sanitize. This example will refer to a new Invenio 3.2 installation, with site name my_site.

  1. Create a new JavaScript file my_site/theme/assets/js/my_site/custom-search-app.js to override the default AngularJS app of invenio-search-js and inject ngSanitize:

    import angular from "angular";
    import ngSanitize from 'angular-sanitize';
    import "invenio-search-js/dist/invenio-search-js";
    angular.element(document).ready(function () {
        angular.bootstrap(document.getElementById("invenio-search-custom"), [

    Take note of the id that you have used here (invenio-search-custom), you will need it later.

  2. Add the new JS file and angular-sanitize to your my_site/theme/ or my_site/theme/ Don’t forget it to update the Python entry points in the if this is a new file.

    from flask_webpackext import WebpackBundle
    theme = WebpackBundle(
            'custom-theme': './scss/custom/theme.scss',
            'custom-search-app': './js/custom-search-app.js',
            # add any additional npm dependencies here...
            'angular-sanitize': '~1.4.9',
  3. Override the default search.html template in invenio-search-ui. You will have to create a new file, e.g. my_site/theme/templates/my_site/search_custom.html and copy/paste the content of the search.html file. Then, just change the HTML tag id attribute that contains the search AngularJS application:

    ... search.html code ...
    {%- block body_inner %}
    <div id="invenio-search-custom">
            search-endpoint="{{ config.SEARCH_UI_SEARCH_API }}"
            search-extra-params='{% if search_extra_params %}{{search_extra_params|tojson}}{% endif %}'
            search-hidden-params='{% if search_hidden_params %}{{search_hidden_params|tojson}}{% endif %}'
            search-headers='{"Accept": "{{ config.SEARCH_UI_SEARCH_MIMETYPE|default('application/json')}}"}'
    {%- endblock body_inner %}
    ... search.html code ...
  4. Change your main config my_site/ to use this new template:

    SEARCH_UI_SEARCH_TEMPLATE = "my_site/search_custom.html"
  5. Run the build again and restart the server:



    pipenv run invenio collect -v
    pipenv run invenio webpack buildall

    or for older Invenio

    (myvirtualenv) invenio collect -v
    (myvirtualenv) invenio assets build