[SOLVED] Bootstrap Select Plugin does not render in Angular ui router ng-view

Bootstrap Select Plugin does not render in Angular ui router ng-view

I use the Bootstrap Select Plugin to create an extended select with input field and multiple selectable options. I use it in an Angular 1.5.3 application set up with ui-router. It does not work in the view where I need it. The code I include in that view:

<select name="jobdomainTeamId"
        class="form-control selectpicker"
        data-live-search="true"
        multiple=""
        style="display: none;"
        ng-model="data.detailView.jobDomain.teams"
        ng-options="team.id as team.displayName for team in data.detailView.teams"
>
    <option value="">No selection</option>
</select>

The attributes 'selectpicker' and 'data-live-search' should trigger Bootstrap to dynamically create a node that provides the extra functionality. But nothing happens when I add this to the Angular view - the select is not visible (style="display: none;").

But when I add the exact same code to index.html, commenting out the ng-view

<!--<div ui-view="body"></div>-->

Here the select works - extra DOM nodes are generated and functionality is as expected. I included all necessary stuff - Boostrap.css, bootstrap-select.css,jquery-2.1.1.,bootstrap.js and bootstrap.select.js

It occurred to me there might be a conflict between angular dependencies and Bootstrap - I include

angular.module('app',[angular-storage','ui.bootstrap','ui.router','ui.router.modal','xeditable','angular-confirm'])

Does anyone have a clue what might block Bootstrap css / js here??

Solution

Turns out that mixing JQuery + Bootstrap.js with Angular.js is asking for trouble. Bootstrap (via JQuery) works by 'grabbing an element and modifying it'. Angular also modifies the DOM element - is an Angular directive (as well as an browser-native DOM element). What I tried to achieve is impossible this way and i ended up using an Angular library (ui-select) that does what I want.