title: TypeError: $(...).selectpicker is not a function with angularJs and angus
body: <p>i'm having some hard time figuring out what does not works with angular select plugin.</p>
  
  <p>I'm working in a project where the codebase is huge and works well, and the imports are managed with angus, so i have a file in which are declared all css, scripts and so on, and for developing reasons, i'm adding some new pages and views to software.</p>
  
  <p>As I said, for developing reason, i have to add my plugins and css directly in my view, and not in the angus build tool, so i'm pretty sure there is only 1 instance of jquery (avoiding this <a href="https://github.com/gwtbootstrap3/gwtbootstrap3-extras/issues/308" rel="nofollow noreferrer">bug</a>).</p>
  
  <p>problem is that when i try to add a simple select in my view like that : </p>
  
  <pre><code>&lt;div class="form-inline"&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="example-select"&gt;Esempio opzioni&lt;/label&gt;
          &lt;select class="form-control selectpicker" data-width="180px" id="example-select"&gt;
              &lt;option&gt;Opzione 01&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;label for="example-select"&gt;Esempio opzioni&lt;/label&gt;
          &lt;select class="form-control selectpicker" disabled data-width="180px" id="example-select"&gt;
              &lt;option&gt;Opzione 01&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
  $('.selectpicker').selectpicker({
      style:'form-control',
      showTick:true
  }); 
  $('.selectpicker').defaults('val','');  
  &lt;/script&gt;
  </code></pre>
  
  <p>with imports like these:</p>
  
  <pre><code>&lt;link href="somepath/bootstrap/css/bootstrap.css" rel="stylesheet"&gt;
  &lt;!-- &lt;script src="somepathjquery/jquery-3.1.1.min.js"&gt;&lt;/script&gt; --&gt;
  &lt;script src="somepath/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;link href="somepath/bootstrap-dropdown-hover/css/bootstrap-dropdownhover.min.css" rel="stylesheet"&gt;
  &lt;script src="somepath/bootstrap-dropdown-hover/js/bootstrap-dropdownhover.min.js"&gt;&lt;/script&gt; 
  
  
  &lt;!-- Bootstrap - DatePicker --&gt;
  &lt;link href="somepath/bootstrap-datetimepicker.min.css" rel="stylesheet"&gt;
  &lt;script src=somepath/bootstrap-datetimepicker/js/moment.min.js"&gt;&lt;/script&gt;
  &lt;script src="somepath/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Bootstrap - Select --&gt;
  &lt;link href="somepath/bootstrap-select/css/bootstrap-select.css" rel="stylesheet"&gt;
  &lt;script src="somepath/bootstrap-select/js/bootstrap-select.min.js"&gt;&lt;/script&gt;
  &lt;script src="somepath/bootstrap-select/js/i18n/defaults-it_IT.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I get these errors :</p>
  
  <pre><code>TypeError: $(...).selectpicker is not a function
  </code></pre>
  
  <p>and :</p>
  
  <pre><code>defaults-it_IT.min.js?_=1501583424550:7 Uncaught TypeError: Cannot set property 'defaults' of undefined
  </code></pre>
  
  <p>note that all links are correct, just different cause security reasons, and the jquery is commented</p>
  
  <p>any clue?</p>
  
  <p>EDIT: 
  Because someone asked that, in the build tool used by all the application, jquery is referenced in this order (pseudo-code):</p>
  
  <pre><code>'jquery.js',
  'angular/angular.js',
  'bootstrap/bootstrap.js'
  </code></pre>