How to configure Bootstrap module using TypeAhead JS in an Angular controller

Question

Im using Bootstrap, typeahead JS and angular. I cannot configure the Bootstrap method from the typeahead template in the angular controller. It does not recognize the angular expression in the footer, which is designed to target modality in HTML. This is probably due to a pattern that does not recognize angular expressions.

So, I would like to target BS modal from the footer in the template. Is there a suitable solution for this job?

See my code:

    <div id="something{{some.id}}" class="modal fade bs-example-modal-sm"    tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                   header here...
                </div>
                <div class="modal-body">
                    content here...
                </div>
                <div class="modal-footer">
                   footer here...
                </div>
            </div>
         </div>
    </div>    



// code in angular controller:

    events.initialize();
    $scope.eventsDataset = {
        name: 'events',
        displayKey: 'title',
        source: events.ttAdapter(),
        templates: {
            empty: 'this is empty',
            suggestion: Handlebars.compile ('<p>{{title}}</p>'),
            footer: '<p class="footer" data-toggle="modal" data-target= "#something{{some.id}}">you can click here..</p>'
        }
    };
    $scope.exampleOptions = {
        highlight: true
    };`enter code here`

Answer 1

# id div.

node , . , .

footer: function() {
  return $('<p></p>')
    .addClass('footer')
    .attr('data-toggle', 'modal')
    .attr('data-target', '#something1')
    .html('click me');
}

,

, .